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

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

为了创建所需的效果，他们为padding-top包装类提供了background-image属性。并将图像限制为max-height，因此，它不会比这更大。休息是所有CSS。

如您所希望的那样动态 image，现在您可以使用后端代码更改style代码值

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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，除了位置：相对于图像。

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

编辑：我已经使用过您上面打印过的课程。不要以为你需要改变小提琴中的任何东西。只需记住添加位置：相对于图像的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;
}