I have a table
which has images in its cells. I want these images to shrink automatically when the window width is reduced. But they should not expand beyond their native size when there's extra space around.
I have a solution for this which works in Chrome, but it does not work in Firefox or Internet Explorer. On Firefox and Internet Explorer, images do not shrink when the window width is reduced, and instead a scroll appears.
How do I get it to work on all browsers ?
JSFiddle: http://jsfiddle.net/ahmadka/GeDxr/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/JhsED
HTML:
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png" />
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
The first is to visit the Options > Advanced dialog, go to the "Cut, copy, and paste" section, and set the "Insert/paste pictures as" dropdown to "In line with text". The second is to click in each table, go to the Table Tools > Layout tab, click the AutoFit button, and choose Fixed Column Width.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Change width:auto
to width:100%
does the trick.
Updated jsFiddle
Try changing the max-width to the largest or actual size of the image - 56px. That will ensure that the image gets no larger. You might also add max-height.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With