Menu
I want to set div background image
div(w:932, h:148) and the image size is 1524*587
whan I trying to set it image is not getting fit to the div size what should i do? my code-
.header .logo { width:932px; height:148px; background:url(images/logo.jpg) no-repeat center;}
949
How do I make an image fit in a div? Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
Set the background-image property with the URL of the image as its value for the <div> element. Set the background-repeat property of the the <div> element. to “no-repeat” so as not to repeat the image. Set the visibility to “hidden” for the <img> tag.
You could use the CSS3 background-size property for this.
.header .logo {
background-size: 100%;
}
But then you still have the problem of wide (or not) browser support. Your best bet is then really to use a "plain vanilla" <img> element whose width/height is set to 100%.
177
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
