5 ms·
img { width: 100%; height: auto; }
by Cyberdog 9y ago
img {
width: 100%;
height: auto;
}
- bzbarsky 9y agoThat 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.
- tzahola 9y agoNope. This would not fit a skinny image to a fat container. But yeah, HTML is like lightyears ahead of anything else :^)
- DonHopkins 9y agoCyberdog: Now THERE was a cool web browser, email and news client. OpenDoc FTW! https://en.wikipedia.org/wiki/Cyberdog https://en.wikipedia.org/wiki/Cyberdog