Question

尝试制作图像会使图像自身调整大小以适合方形容器。

我想这样做，无论图像的大小如何，它都会调整大小以适应容器，但保持其宽高比。

到目前为止，这是我的HTML代码：

<div id="product-details">

    <div id="product-image-display">
        <div>
            <div>
                <span><img src="img/product-images/IBANEZ-AW300ECE-DARK-VIOLIN-SUNBURST-02.JPG"></span>
            </div>
        </div>
    </div>

</div>

和CSS：

div#product-details div#product-image-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div#product-image-display:before {
    content: "";
    display: block;
    padding-top: 100%;
}

div#product-details div#product-image-display div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#product-details div#product-image-display div div {
    display: table;
    width: 100%;
    height: 100%;
}

div#product-image-display div div span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

div#product-details div#product-image-display div div span img {
    height: 100%;
}

以下是它现在正在做的事情：

image

我想让图像调整大小并保持其宽高比，无论它的大小。我不能只做宽度：100％，因为高而瘦的图像不能正确调整高度。而且由于类似但相反的问题，我不能做相反的事情。如果使用CSS语句，我无法做到吗？（如果img width＆gt; img height，那么img width：100％等）这是我能做到这一点的合理方式。

如果没有javascript /纯CSS / HTML，有没有办法做到这一点？

编辑：重大问题。

Answer 1

使用width: 100%是最简单的方法。

Answer 2

尝试：

div#product-details div#product-image-display div div span img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

Answer 3

如何将图片作为背景而不是<img src=...标记？

然后你可以在你的CSS中使用background-size: contain;，如下所示：

HTML

<div id="product-details">

    <div id="product-image-display">
        <div>
            <div>
                <span style='background-image: url(http://placehold.it/20x75)'></span>
            </div>
        </div>
    </div>

</div>

CSS

div#product-details div#product-image-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div#product-image-display:before {
    content: "";
    display: block;
    padding-top: 100%;
}

div#product-details div#product-image-display div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#product-details div#product-image-display div div {
    display: table;
    width: 100%;
    height: 100%;
}

div#product-image-display div div span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

div#product-details div#product-image-display div div span img {
    height: auto;
    width: auto;

}

Fiddle

图像未根据父div

3 个答案: