HTML – 调整图像大小 – 保持比率 – 没有背景图像

2023年11月1日 236次阅读

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

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>

任何帮助都会受到大力赞赏 – 我甚至不知道我是否正确地思考它或者我错过了什么 – 谢谢！

我想在这里实现的例子：

《HTML – 调整图像大小 – 保持比率 – 没有背景图像》

最佳答案 为了创建所需的效果,他们为background-image包装类提供了padding-top属性.并将图像限制在最大高度,因此,它不会变大.休息是所有CSS.

如您所希望它是动态图像,现在您可以使用后端代码更改样式标记值

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