SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Barnsley, UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stop div classes from resizing images

    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. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    At the moment your code has this structure:
    HTML Code:
    <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:
    Code:
    .thumbs img {
        border: 1px solid #E3E3E3;
        height: auto;
        margin-bottom: 10px;
        max-height: 106px;
        max-width: 68px;
    }
    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:
    HTML Code:
    <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. #3
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Barnsley, UK
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    promo image.jpg


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •