如何同时满足 img 元素的纵横比保留 + centering-in-div 的要求？答案

【问题标题】：How can aspect-ratio-preservation + centering-in-div be simultaneously satisfied for an img element?如何同时满足 img 元素的纵横比保留 + centering-in-div 的要求？
【发布时间】：2016-08-31 07:30:50
【问题描述】：

来自 phrogz.net 的 example 展示了如何在纵横比接近 1:2 或 2:1 的页面上呈现 SVG 元素。无论哪种方式，SVG 都以 1:1 的比例显示。

如何同时满足一个 img 元素的长宽比保持 + centering-in-div 的要求？

jsfiddle

<!DOCTYPE html> 
<html > 
    <head> 
        <meta charset="UTF-8">
        <title>Sizing SVG & IMG to Fill a Container</title>
        <style type="text/css" media="screen">
            html, body { background:#eee; margin:0; padding:0; height:100%; }
            #foo { position:absolute; left:2%; width:46%; top:2%; height:96%; background:red; }
            #bar { position:absolute; left:52%; width:46%; top:2%; height:96%; background:grey; }

            svg { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
            img { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }

            .face { stroke:#000; stroke-width:20px; stroke-linecap:round }
        </style>
    </head><body>
        <div id="foo">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
            <circle r="200" class="face" fill="yellow"/>
                <path fill="none" class="face"
                      transform="translate(-396,-230)"
                      d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076" />
                <circle cx="-60" cy="-50" r="20" fill="#000"/>
                <circle cx="60" cy="-50" r="20" fill="#000"/>
            </svg>
        </div>
        <div id="bar">
            <img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
        </div>
</body></html>

【问题讨论】：

标签： css svg

【解决方案1】：

如果您将图像设置为 css 样式，则可以这样做

html, body { background:#eee; margin:0; padding:0; height:100%; }
#foo { position:absolute; left:2%; width:46%; top:2%; height:96%; background:red; }
#bar { 
  background: url(http://www.pngall.com/wp-content/uploads/2016/07/Car-Download-PNG.png) no-repeat;
  background-size: contain;
  background-position: center;
  position:absolute; left:52%; width:46%; top:2%; height:96%; }

svg { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
img { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }

.face { stroke:#000; stroke-width:20px; stroke-linecap:round }

<div id="foo">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
    <circle r="200" class="face" fill="yellow"/>
    <path fill="none" class="face"
          transform="translate(-396,-230)"
          d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076" />
    <circle cx="-60" cy="-50" r="20" fill="#000"/>
    <circle cx="60" cy="-50" r="20" fill="#000"/>
  </svg>
</div>
<div id="bar">
</div>

【讨论】：

【解决方案2】：

居中

将position:relative 添加到#bar，然后将以下内容添加到<img>：

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);

维护 AR

为<img>（使用min-width 和min-height）提供绝对尺寸并将其添加到<img>：

object-fit:contain;

这是修改后的 FIDDLE <img> 和 #bar 的尺寸缩小到 10%，因此它与 SVG 相当。请注意，在 Snippet 中没有 SVG 和 <img> 之间的比较，但 <img> 的代码是相同的，只是缩放尺寸不同。

片段

#bar {
  min-width:208px;
  min-height: 320px;
  border: 3px solid red;
  position: relative;
}
img {
  width: 100%;
  min-width: 245px;
  height: 100%;
  min-height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
  object-fit: contain;
  outline: 1px dashed blue;
}

<div id="bar">
  <img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
</div>

【讨论】：