Menu
I have a bunch of image thumbnails I'm displaying in a web page. All of the images are 256 pixels wide, and I'm shrinking them 50% with <img width="128px" ...>
Most images have a 4x3 ratio, so they grid quite nicely over several rows.
However, some images are very tall (e.g. 256x1200). I would like to specify a maximum height for these images, but the image must be truncated (i.e. showing only the top part of the image) and not scaled (which would undesirably squish the image).
I've tried specifying CSS img { max-height="128" } but of course that is giving me the undesired scaling.
So: how can I specify a maximum height that will cause the image to truncate and not scale?
update: thanks all, I've added an example below.
980
We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
Wrap them in a classed div, set the height on the div to 128, and then set overflow: hidden for that class.
161
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
