Height of responsive image

[roy99]

how to put the height of the images when i get responsive the image is not be its actual place what should i do for responsive look???

[bbsmooth]

Can you show us what you have so far? Do you have a codepen (or something similar) that you can give us a link to?

Also, you can google ‘css responsive images’ to find a ton of articles on how to do this but I’ll save you the trouble and link to a good article.

[roy99]

https://codepen.io/sunny-roy-the-vuer/pen/gOmpKme…

Respected Sir, This is the link of my document…I have not put any Responsive Property in this css…Acutally,the Issue that i’m facing that the header image which is at line 10in css and banner image which is in 90line in css… when i minimize there’s gape between the header image and banner image…Kindly resolve my issue Please …And tell me how to put the image height for responsive with example.Kindly,Sir…Thank You…! @bbsmooth

[bbsmooth]

I’m not sure I understand completely, but if you want the height of the background image in the header to be responsive then you just need to add another 100% to the background-size:

background-size: 100% 100%;

Now as to whether you should do this? Well, give it a try, make sure to change the height of your browser from really short to really tall. I’m not sure the woman in that pic will appreciate being put on the rack like that

[jsdisco]

For mid-sized viewports/tablets, this could work:

#header {
	width: 100%;
	height: 40vw;
	background-image: url("https://i.ibb.co/gmpr5cS/header.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

So, setting the background-size to “cover” and adjusting the height depending on the width. This won’t work for smartphones, though. For narrow viewports. maybe something like this:

#header {
	height: 90vh;
	background-size: cover;
    background-position:top right;
}