Question

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

如何为img元素同时满足相同的宽高比保存+居中div？

<!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>

Answer 1

定心

将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相同。请注意，在代码段中，SVG与<img>之间没有比较，但<img>的代码是相同的，但缩放尺寸除外。

段

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

如果您将图像设置为css样式，则可以执行此操作

＆＃13;

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 }

＆＃13;

<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>

＆＃13;

对于img元素，如何同时满足纵横比保存+居中中心？

2 个答案:

定心

维护AR

段