Question

好的，首先，我确信在互联网上有一个很好的教程，但我甚至无法“写下”问题的可能标题，我为此道歉。

我喜欢敏感而简单的妆容：

<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％ {1}}宽度。我之前使用过这个解决方案，但这次对我不起作用：我需要用PHP动态插入图像。

如何获得与上述CSS技术类似的效果，但是在HTML中声明了图像？

更新：类似这样的事情：http://jsfiddle.net/fF6GL/ - 但我需要上面的构成，在这种情况下这个不适用

P.S。如果可能的话，我想要一个不使用JS库的解决方案。

Answer 1

如果您可以将这些链接的图像放入列表中，这可能有效：

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Answer 2

好的，我有一个适合我的解决方案，这里有一个演示：http://jsfiddle.net/fF6GL/3/

基本上，我只是直接在HTML上添加CSS背景图片：

<div>
  <a href="" style="background-image: url(/url/to/image1.jpg);"></a>
  <a href="" style="background-image: url(/url/to/image2.jpg);"></a>
</div>

这就是CSS：

div {
  width: 90%;
  margin: 0 auto;
}

div a {
    display: block;
    float: left;
    width: 50%;
    position: relative;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

对于身高，我在这里使用了一个小巧的技巧：

div a:before {
   content: "";
   padding-top: 75%;
   display: block;
}

这不适用于IE，但真诚地，我不在乎。

图库的解决方案

2 个答案: