时间戳

首页 > 解决方案 > 如何在其父 div 中调整 SVG 文件的大小、居中对齐并使其响应？

html - 如何在其父 div 中调整 SVG 文件的大小、居中对齐并使其响应？

问题描述

我试图将 svg 文件居中到其父 div 中，但没有成功。

我创建了这个小提琴-> https://jsfiddle.net/wfukyd4q/

你可以看到我做了以下事情：

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
    <div style="background-color:#489734;height:500px">
         <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
    </div>
</div>

我的目标是让 svg 比方说 50% 并将其放在中心，但也要对移动设备做出响应。

谢谢

标签： htmlcsssvg

解决方案

假设您的图像具有类svg-image：

<img class="svg-image" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">

请添加类似这样的css：

.svg-image {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    width: 90%;
}

您可以为不同的屏幕尺寸指定多个@media查询并应用所需的图像宽度。

编辑：

要使图像垂直和水平居中，您可以向 div（包装图像）添加样式：

.class-of-your-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    justify-content: center;
    align-items: center;
}

推荐阅读