Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

    img {
      width: 100%;
      height: auto;
    }


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.


Wouldn't it be setting both "max-width" and "max-height" to 100%? Or the background-image / background-size hack.


Believe this is what people are looking for:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit


Nope. 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.


This works if you set "width: 100%; height: 100%", yes (and "object-fit: contain").


Nope. See my comment above.


Cyberdog: Now THERE was a cool web browser, email and news client. OpenDoc FTW!

https://en.wikipedia.org/wiki/Cyberdog


Nope.

This would not fit a skinny image to a fat container.

But yeah, HTML is like lightyears ahead of anything else :^)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: