图像没有相对于父 div 正确调整自身大小

Posted 2023-02-25

【中文标题】图像没有相对于父 div 正确调整自身大小

【英文标题】：Image not resizing itself properly in relation to parent div

【发布时间】：2015-12-29 17:49:38

【问题描述】：

尝试使图像能够自行调整大小以适合方形容器。

我想让它无论图像的大小如何，它都会自行调整大小以适应容器，但保持其纵横比。

到目前为止，这是我的 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 做 if 语句，可以吗？ （如果 img 宽度 > img 高度，则 img 宽度：100% 等）这是我可以做到的合乎逻辑的方式。

没有javascript/纯CSS/HTML有什么办法吗？

编辑：大问题改写。

【问题讨论】：

请给出图片来源的绝对路径

这个？ ***.com/questions/19776670/…

添加了一张图片来显示代码当前正在做什么，并进一步解释了我想要它做什么。

另外，不，鲁普。不寻找背景封面或类似的东西。只是想让图像自动调整大小以适合其容器，但不会丢失其纵横比。不过，谢谢。

【参考方案1】：

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

【讨论】：

每当我使用width: 100% 时，它都会使图像宽度正确地调整到容器的大小，但是由于图像很高，图像的下半部分会被截断。

取出所有高度的css

尝试给图片添加这个属性：style="width: 100%"

这就像我将width: 100% 添加到div#product-details div#product-image-display div div span img height: 100%; 一样。还是不行。

尝试身高：100%

【参考方案2】：

试试：

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

【讨论】：

试过了。仍然遇到同样的问题。用图片编辑了我的原始帖子以显示正在发生的问题。

谢谢。快速提问：:before 代码的目的是什么？我注意到padding 会影响图像的可视区域。这可能是部分原因，但如果绝对有必要拥有该代码，我不想弄乱它。

我从某个地方复制了它（哈哈），制作了一个方形盒子，可以将你放入的任何东西放在中心。见：jsfiddle.net/josedvq/38Tnx。我认为这是为了使您将内容放入的盒子的“高度”？

嗯，这接近了吗？ jsfiddle.net/suomyone/42pc1shq/9。它是基于视口的响应式的。我放置了一个纵向和横向图像，以显示它们都调整为“框”。但是，我仍在尝试找出一种将肖像图像垂直居中的方法。您会注意到我注释掉了很多现有代码，但如果必须包含任何代码，请告诉我。

是的，这可以工作，但是您拥有的最后一张图像（图像的宽度大于高度）必须垂直和水平居中在正方形的中间。实际上，我也得出了与您发布的内容类似的解决方案，但图像仍未垂直和水平居中。我还想避免使用大众单位，因为跨浏览器仍然存在兼容性问题。

【参考方案3】：

将您的图片作为背景而不是<img src=...tag 怎么样？

然后你可以在你的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