[Closed] How can I make tag behave like background-size: cover;?

[nixnerd]

I have a situation where I would much rather add images to the HTML via <img> tag than use background-image in CSS.

The problem is, I need the photos to dynamically re-size, much like the background-size: cover; method.

What are your thoughts? I’ve tried this:

img{ width: 100%; height: auto; }. Still has breakpoints that I’m not cool with.

[__]

Are you using this as a background image, or as regular image content? What “breakpoints” do you not like (and what, specifically, are their problem(s))?

[__]

background-size seems like a pretty good solution, to me. Simple, robust, very good support.

But if you prefer images, and if you can control the aspect ratio of the photo “area,” then you could probably make the height:auto solution work just fine too (e.g., with hidden overflow on the container).

Can you show me an example (pen) that breaks?

[__]

The only thing that sucks is you have to use inline styling to change the photo for each card. That’s kind of whack. I don’t really like my HTML and CSS to mix.

Well, if an <img> element would be appropriate otherwise, then I think it’s safe to consider the background image “content” and not “presentation.” I think it’s fine to keep it in the markup. Actually, I’m taking the same approach right now with a slideshow (though not because of background-size).

As for being “legit,” looks like the answer is IE9+ (except for Opera Mini).

[DaJy]

Hi, you can try this jQuery alternative
https://github.com/greenish/jquery-cover

You just add a class like this

<img src="image.jpg" class="myBackgroundImage" alt=""/>

demo

[Shikkediel]

Thanks for the tip but I’m sure he’s moved on since then. And if one’s gonna use jQuery, it only needs about five lines of code…

[Author]

Posts