CODEWITHSUNDEEP
csshtmlresponsive-designfluid-layout
aaronfarr
aaronfarr

Reputation: 676

Multiple Fluid Images

I have a simple container with an image in it.

<div class="container" style="width:800px;">
     <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

If I set the img style max-width: 100%; the container can change width and scale the image inside it. Perfect.

However, what if I have a few images inside the container? like so.

<div class="container" style="width:800px; background:red;">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

The above code will not perform any scaling and overflow onto the next line - expanding the container height.

How can I make the images scale uniformly to fit a fixed width with pure CSS? Is it even possible?

Sandbox: http://tinkerbin.com/ijy5zgH3

Upvotes: 0

Views: 243

Answers (2)

Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

Not ideal but in that case, you can retain img {max-width: 100%;} but resort to a <table>

<table class="container" style="width:800px;">
    <tr>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
    </tr>
</table>

Upvotes: 1

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

This will work if you are willing to change HTML structure.

HTML:

<ul class="container" style="width:800px;">
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
</ul>

CSS:

img {max-width: 100%; }
li { display: table-cell; }

​ DEMO

Upvotes: 1

Related Questions