CODEWITHSUNDEEP
htmlwordpressimagecss
Shaun Taylor
Shaun Taylor

Reputation: 972

Resize image - keep ratio - without background image

Im trying to achieve the effect shown on this site:

http://fofwebdesign.co.uk/template/_testing/scale-img/target-ratio-resize.htm

BUT this site does it using a background image for a div. I cannot use the background image as the image is inside Wordpress and it's being brought in dynamically using the following code: 

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

So I have tried the same approach and tried the following things o try and bring the image in as a background image:

.featured-image {
  max-width: 960px;
  /* actual img width */
  max-height: 150px;
  /* actual img height */*
  height: 150px;
  /* actual img height - IE7 */
  background-image: <?php the_post_thumbnail(); ?>;
  background-size: cover;
  background-position: center;
}

and using this: 

background-image: url(<?php the_post_thumbnail(); ?>);

Alas, I cant seem to get it to work - Im not even sure I can use PHP inside a CSS document...

So I'm looking for a way to achieve this image resize just on the following class without using a background image... 

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

Any help would be massively appreciated - I don't even know if I'm thinking about it correctly or I'm missing something - Thanks!

Example of what I'm trying to achieve here:

enter image description here

Upvotes: 4

Views: 545

Answers (5)

Pipo
Pipo

Reputation: 518

It needs to be get_the_post_thumbnail_url.

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
    <div class="featured-image" style="background-image:url(<?php echo get_the_post_thumbnail_url('full');?>);"></div>
<?php endwhile; endif; ?>

.featured-image {
background-size: cover;
background-position: center;
}

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

To create the desired effect, they gave a padding-top property to the background-image wrapper class. And restricted the image to a max-height so, it doesn't grow bigger than that. Rest was all CSS.

As you wanted it to be dynamic image, now you can change the style tag value using your backend code

.section {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  max-height: 150px;
  /* restricted image height */
}

.section:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 33.333%;
  /* this is not as per formula, but as a custom aspect ratio */
}
<div class="section" style="background-image: url('http://fofwebdesign.co.uk/template/_testing/scale-img/students.jpg')">


</div>

<h1>When you want to keep the aspect ratio in background images use below formula</h1>
<code>((image height * 100%) / image width)</code>

Upvotes: 1

Gezzasa
Gezzasa

Reputation: 1453

There is probably an easier way, But using Jquery does the trick. Don't think you really need my CSS, apart from the position:relative for the image.

https://jsfiddle.net/ny746vLx/2/ (Non WordPress)

Jquery as follows:

$(".featured-image>img").each(function(i, img) {
    $(img).css({
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

https://jsfiddle.net/ny746vLx/4/ (Wordpress)

;(function($){
    imageChange = function(){
        $(".featured-image>img").each(function(i, img) {
        $(img).css({
            left: ($(img).parent().width() - $(img).width()) / 2
        });
    });
}
    $(window).resize(imageChange); 
})(jQuery);

imageChange();

This will physically move the image to the left enough for the image to center.

The jQuery selector '>' means that it will target all img tags directly after the .imageContainer div. You can use these declarations in your CSS too.

EDIT: I've used the classes that you've printed above. Don't think you'll need to change anything from the fiddle. Just remember to add position:relative to your css for the image.

EDIT2: I've added another fiddle that will work (Hopefully) with wordpress. jQuery has some conflicts with it. There are easier ways but I'm unfamiliar really with conflicts in jQuery.

Upvotes: 0

netscope234
netscope234

Reputation: 11

Try using inline CSS to achieve it in your HTML template like this:

<div 
    class="featured-image" 
    style="background-image:url(<?php the_post_thumbnail_url('full'); ?>);">
</div>

Then use CSS to display the image properly:

.featured-image{
   display:inline-block; /** or block, whichever suits your design **/
   background-size:cover;
   background-repeat:no-repeat;
}

With this approach, you can even have more elements display on the image within the "featured-image" div.

I've just updated this answer to output the post thumbnail url rather than with the default img tag.

Upvotes: 0

Rehan
Rehan

Reputation: 4013

I hope you are using Bootstrap,don't use the image as background but use it as with the proper <img> tag and add img-fluid and d-block class to image tag.

Upvotes: 1

Related Questions