Css 如何保持纵横比+；img元件是否同时满足div定心要求？_Css_Svg

Css 如何保持纵横比+；img元件是否同时满足div定心要求？

css svg

Css 如何保持纵横比+；img元件是否同时满足div定心要求？,css,svg,Css,Svg,来自phrogz.net的这篇文章展示了如何在纵横比接近1:2或2:1的页面上呈现SVG元素。无论哪种方式，SVG都以1:1的比例显示 img元件如何同时满足相同的纵横比保持+div居中调整SVG和IMG的大小以填充容器 html，正文{背景：#eee；边距：0；填充：0；高度：100%；} #foo{位置：绝对；左侧：2%；宽度：46%；顶部：2%；高度：96%；背景：红色；} #条{位置：绝对；左侧：52%；宽度：46%；顶部：2%；高度：96%；背景：灰色；} svg{位置：绝对

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

img元件如何同时满足相同的纵横比保持+div居中


调整SVG和IMG的大小以填充容器
html，正文{背景：#eee；边距：0；填充：0；高度：100%；}
#foo{位置：绝对；左侧：2%；宽度：46%；顶部：2%；高度：96%；背景：红色；}
#条{位置：绝对；左侧：52%；宽度：46%；顶部：2%；高度：96%；背景：灰色；}
svg{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景：绿色；}
img{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景：绿色；}
.面{笔划：#000；笔划宽度：20px；笔划线帽：圆形}

对中将

位置：相对添加到#条
，然后将以下内容添加到
如果将图像设置为css样式，则可以执行此操作

html，正文{背景：#eee；边距：0；填充：0；高度：100%；}
#foo{位置：绝对；左侧：2%；宽度：46%；顶部：2%；高度：96%；背景：红色；}
#巴{
背景：url(http://www.pngall.com/wp-content/uploads/2016/07/Car-Download-PNG.png)不重复；
背景尺寸：包含；
背景位置：中心；
位置：绝对；左侧：52%；宽度：46%；顶部：2%；高度：96%；}
svg{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景：绿色；}
img{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；背景：绿色；}
.face{stroke:#000；笔划宽度：20px；笔划linecap:round}


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

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

object-fit:contain;