Stop div classes from resizing images

Get Started
1

I’m trying to add a simple promo image below the product thumbnails but the code keeps resizing the promo image to the size of the thumbnails. How can i insert the image without it resizing? I have limited knowledge with coding so any help would be great!

I’ve added the image in a table below the product thumbnails and as you can see its tiny!? - http://goo.gl/y4glmJ

2

At the moment your code has this structure:

<div id="product-images">
	<div id="main-img">
	...
	</div>
	<div class="thumbs">
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<table width="350" cellspacing="0" cellpadding="0" border="0">
			<tbody>
				<tr>
					<td>
						<img width="350" height="100" alt="Free Del" src="/mall/thecoffeebuyer/customerimages/free_delivery.jpg">
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

That means: your img is inside the <table>, and the <table> is inside the <div class=“thumbs”>.
The class=“thumbs” is commanding that all images inside that div must have the:

.thumbs img {
    border: 1px solid #E3E3E3;
    [B]height: auto;[/B]
    margin-bottom: 10px;
    max-height: 106px;
    [B]max-width: 68px;[/B]
}

So your image (inside this part if the tree/cascade) cannot escape from the max-width of 68px. The automatic height brings back the original img-height to the same proportion as the shrinked width.
Result: image to small!

What is needed, is to move the <img> out the <div class=“thumbs”>, and let it be 1 level higher.
Then it is still in the left column (inside the <div id=“product-images”>, which also contains the main-image with the full width of the left column).
In the meantime you don’t need to build a <table> around the <img>.
The <img>code can directly in the div.
Because the <img> has the full width, the browser has to position it always under the 1 or 2 or 3 or … thumbnail-images:

<div id="product-images">
	<div id="main-img">
	...
	</div>
	<div class="thumbs">
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
		<div class="prodDImg">...</div>
	</div>
	<img width="350" height="100" alt="Free Del" src="/mall/thecoffeebuyer/customerimages/free_delivery.jpg">
</div>
3

Ah what a relief and thank you very much! I understand where i went wrong with the different div levels now thanks for the clear explanation.

Greatly Appreciated
Ian :smiley: