Menu
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 { width: 100%; padding: 5px; margin: 0px 0px 15px -5px; background: #ADA19A; color: #000000; min-height: 100px; } The CSS being applied on the image:
.product{ display: inline; float: left; } So, how can I fix this?
842
If your image doesn't fit the layout, you can resize it in the HTML. 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.
Those images on the site you linked to are actual size, so the simple answer is just to resize the image. You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Add overflow:auto; to .product1
192
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
