[resolved] How to resize an image inside at div when image is called using a php tag (3 posts)

  1. clouder
    Posted 2 years ago #

    So here is my php code for the image

    <div class="cattemptwrapper">
    	<div class="cattempthumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
    	<div id="cattemptitle"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
    	<div id="cattempinfo"><p>by <?php the_author(); ?>  <?php if (function_exists('wpp_get_views')) { echo wpp_get_views( get_the_ID() ); } ?> views<br/><?php the_date(); ?> </p></div></div>

    Now I'm trying to resize the image to 150 width and 100 height, but it overflows from the div container I put it in.

    .cattemptwrapper {width:150px; float:left; height:250px;margin-left:15px;}
    	.cattempthumbnail {width:150px;height:100px;float:left;}

    This is the resulting mess - http://yawncentral.com/uncategorized/

  2. Rachel Goldstein
    Posted 2 years ago #

    I think you need to put the width and height css on the image, not the class. So

    .cattempthumbnail img {width:150px;height:100px;float:left;}

    but I also think that's going to squash your images instead of cropping them. You probably need to either change your thumbnail size in Settings > Media, and then regenerate thumbnails, or, if you need that thumbnail size to stay the same, add a new media size.

  3. clouder
    Posted 2 years ago #

    I see that now. Thank you :)

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.