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

Question

我试图达到本网站上显示的效果：

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

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

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

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

.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 到您的 css 。

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