How to resize an image inside at div when image is called using a php tag

  • Resolved clouder

    (@clouder)


    11 years, 3 months 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;}
.cattemptwrapper
	.cattempthumbnail {width:150px;height:100px;float:left;}

    This is the resulting mess – https://yawncentral.com/uncategorized/

Viewing 2 replies - 1 through 2 (of 2 total)

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

    Thread Starter clouder

    (@clouder)

    I see that now. Thank you ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to resize an image inside at div when image is called using a php tag’ is closed to new replies.