Home/ Questions/Q 8853007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:32:33+00:00

I have a simple container with an image in it. <div class=container style=width:800px;> <img

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0