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

概述我试图达到这个网站上显示的效果： http://fofwebdesign.co.uk/template/_testing/scale-img/target-ratio-resize.htm 但是这个站点使用div的背景图像来完成它.我不能使用背景图像,因为图像在Wordpress中,并且使用以下代码动态引入它： <div class="featured-image"> <?php the_p 我试图达到这个网站上显示的效果：

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

但是这个站点使用div的背景图像来完成它.我不能使用背景图像,因为图像在wordpress中,并且使用以下代码动态引入它：

<div >   <?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 >   <?PHP the_post_thumbnail(); ?></div>

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

我想在这里实现的例子：

解决方法 为了创建所需的效果,他们为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  ></div><h1>When you want to keep the aspect ratio in background images use below formula</h1><code>((image height * 100%) / image wIDth)</code>

总结

以上是内存溢出为你收集整理的HTML – 调整图像大小 – 保持比率 – 没有背景图像全部内容，希望文章能够帮你解决HTML – 调整图像大小 – 保持比率 – 没有背景图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。