3 ms·
That won't work right; it can overflow vertically. Consider the case of a 10x10 image in a container of width 500px and height 100px... Ideally you would want
by bzbarsky 9y ago
That won't work right; it can overflow vertically. Consider the case of a 10x10 image in a container of width 500px and height 100px... Ideally you would want it to end up 100x100, but it will end up 500x500 with that CSS.
- mikewhy 9y agoWouldn't it be setting both "max-width" and "max-height" to 100%? Or the background-image / background-size hack.
- flomo 9y agoBelieve this is what people are looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
- bzbarsky 9y agoThis works if you set "width: 100%; height: 100%", yes (and "object-fit: contain").
- tzahola 9y agoNope. See my comment above.
- tzahola 9y agoNope. This determines how the image is rendered within the img element. The img element itself won’t be constrained in its aspect ratio. E.g. try adding a border or drop-shadow to the img and you’ll see the problem.