好的,首先,我确信在互联网上有关于此的很好的教程,但我什至无法设法“写下”问题的可能标题,对此我深表歉意。
我喜欢有反应且简单的妆容:
<div class="gallery-container">
<a href="#"> <img src="/your/image/url.jpg"> </a>
<a href="#"> <img src="/your/image/url2.jpg"> </a>
<a href="#"> <img src="/your/image/url3.jpg"> </a>
......
</div>
我的问题是:我有不同的宽高比图像来展示所有具有 3:2 宽高比的图像。
一个简单的解决方案是使用 CSS 将图像作为背景插入 a
元素,将其设置为居中包含,然后使用简单的 JS 脚本将高度定义为 75% a
宽度。
我以前使用过这个解决方案,但这次对我不起作用:我需要使用 PHP 动态插入图像。
如何使用 HTML 中声明的图像获得与上述 CSS 技术类似的效果?
更新:像这样:http://jsfiddle.net/fF6GL/ - 但我需要上面的妆容,这种妆容在那种情况下行不通
附言如果可能的话,我想要一个不使用 JS 库的解决方案。
最佳答案
如果您可以将这些链接的图像放入列表中,这可能会起作用:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
关于javascript - 图片库解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20163379/