SVG不宽度/高度呈现与天然大小

我有此SVG不具有一个或width属性height 我有以下HTMLSVG不宽度/高度呈现与天然大小

<div class="block"> 
    <img src="https://s3-eu....vAmfIxVv/kiwi.svg"> 
</div>

用下面的CSS

.block { 
    display: inline-block; 
    width: auto; 
} 

img { 
    width: 100%; 
}

尽管我希望svg的宽度为100％，但是它在具有一些奇怪的宽度/高度的Chrome中呈现（仅在Firefox中它的维度为0x0）

JSFIDDLE

那么，这自然width来自为什么不是宽度100％有什么建议？

是否可以使svg宽度达到100％？

来源

2017-10-10 Jeanluca Scaljeri

如果你想在<svg>元素汽车宽度上，你只需在父<div>使用display: block，但对SVG元素本身使用max-width: 100%。铬不知何故不能执行适当的宽度计算时SVGs包含一个内联块元件内：

.block { 
    display: block; 
} 

img { 
    max-width: 100%; 
}

证明的概念例如：

section { 
 
    border: 2px solid green; 
 
    margin: 20px; 
 
    background-color: yellow; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
.block { 
 
    display: block; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
.svg { 
 
    border: 1px solid red; 
 
}

<section> 
 
    <div class="block svg"> 
 
     <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/46194/456229/JCHA4rtvAmfIxVv/kiwi.svg" alt=""> 
 
    </div> 
 

 
    <div class="block"> 
 
     <img src="http://placeholder.pics/svg/100x200" alt=""> 
 
    </div> 
 
</section>

来源

2017-10-10 17:36:07 Terry

SVG不宽度/高度呈现与天然大小

回答

相关问题