调整图像大小 - 保持比例 - 没有背景图像

Question

我正在尝试实现本站显示的效果：

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

但是这个网站使用 div 的背景图片来做到这一点。我不能使用背景图像，因为图像在 Wordpress 中，并且它是使用以下代码动态引入的：

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

所以我尝试了相同的方法并尝试了以下方法，尝试将图像作为背景图像引入：

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

并使用这个：

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

唉，我似乎无法让它工作 - 我什至不确定我是否可以在 CSS 文档中使用 PHP...

所以我正在寻找一种方法来在不使用背景图像的情况下仅在以下类上实现此图像调整大小...

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

任何帮助将不胜感激 - 我什至不知道我是否正确地考虑它或者我错过了什么 - 谢谢！

我在这里尝试实现的示例：

Answer 1

我希望您使用的是 Bootstrap，不要将图像用作背景，而是将其与正确的 <img> tag 一起使用，并将 img-fluid 和 d-block 类添加到图像标签中。

Answer 2

为了创建所需的效果，他们为 background-image 包装类提供了 padding-top 属性。并将图像限制为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>

Answer 3

尝试使用内联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 内的图像上显示更多元素。

我刚刚更新了这个答案以输出帖子缩略图url，而不是使用默认的img 标签。

Answer 4

可能有一种更简单的方法，但使用 Jquery 就可以了。不要以为你真的需要我的 CSS，除了 position:relative 的图片。

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 选择器'>' 意味着它将直接定位在 .imageContainer div 之后的所有 img 标签。您也可以在 CSS 中使用这些声明。

编辑：我使用了您在上面打印的类。不要认为你需要从小提琴中改变任何东西。只需记住添加 position:relative to your css for image。

EDIT2：我添加了另一个可以（希望）与 wordpress 一起使用的小提琴。 jQuery 与它有一些冲突。有更简单的方法，但我真的不熟悉 jQuery 中的冲突。

Answer 5

必须是 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;
}