Menu
I'm trying to create an image looking like the cover image here, using only css and html. I've tried different things but nothing has worked so far.
This is my html code:
<div id="container">
<img id="image" src="...">
</div>
What css code should I use?
778
The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
First, take note of roughly how wide the image shows up on the page. Background images: 1600x900px. Read this article for more guidelines. Full-width images: At least 1400px wide for the highest quality.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Set the image's width to 100%, and the image's height will adjust itself:
<img style="width:100%;" id="image" src="...">
If you have a custom CSS, then:
HTML:
<img id="image" src="...">
CSS:
#image
{
width: 100%;
}
Also, you could do File -> View Source next time, or maybe Google.
127
If you want to have same ratio you should create a container and hide a part of the image.
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}<div class="container">
<img src="http://placehold.it/100x100" class="img" alt="Our Location" />
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
