Resize image - keep aspect ratio - no background image

Question

I am 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 this using a background image for a div. I cannot use the background image, since the image is inside Wordpress and is dynamically used with the following code:

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

So, I tried the same approach and tried the following things: try and bring the image 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 can't get it to work - I'm not even sure I can use PHP inside a CSS document ...

So I'm looking for a way to achieve this image size only in the next class without using a background image ...

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

- , , - - !

, :

Answer 1

, padding-top background-image. max-height, , . CSS.

, image, style,

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

Hide result

Answer 2

, Bootstrap, , <img> tag img-fluid d-block .

Answer 3

inline CSS HTML :

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

CSS image:

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

div "featured-image".

, url, img .

Answer 4

, , JQuery . , CSS, : .

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

Jquery :

$(".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();

, .

jQuery ' > ' , img div.imageContainer. CSS.

EDIT: , . , - . : css .

EDIT2: , () wordpress. jQuery . , jQuery.