如何减小 flex box 中特定 SVG 的大小?

问题描述 投票:0回答:0

我在 www.poggen.com 有一个静态网站,我正在尝试减小右边第三个弹性框中徽标的大小以匹配其他两个,但我根本无法进行任何更改.我尝试直接将高度和宽度属性添加到 SVG (

<svg style="max-width:50px;max-height:50px;"
),但这除了使 SVG 在移动站点上几乎无法辨认之外没有任何区别。如何缩小 SVG 以匹配其他两个徽标和移动设备上的正常大小?请帮忙

编辑 - 更改

.text-image img
宽度会更改所有三个 SVG 徽标的大小。

这是我为 infoflex 框和相应的图像容器编写的 CSS。我不确定为什么移动 SVG 的大小显着减小,但宽屏网站保持不变。

/*infoboxemain css*/
.infoboxemain {
    padding-bottom: 120px;
    position: relative;
    z-index: 2;
}

.infoboxemain .infoflexbox {
    display: flex;
    justify-content: space-between;
    margin: -105px -30px 0;
}

.infoboxemain .infoboxes {
    background: #EFF3F9;
    border-radius: 10px;
    margin: 0 30px;
    width: calc(33.33% - 60px);
    padding: 0px;
}


.infoboxemain .infoboxes .image-container .bg-image {
    width: 100%;
}

.infoboxemain .infoboxes .image-container .text-image {
    position: absolute;
    vertical-align: middle;
    text-align: center;
}

.text-image img {
    width: 95%;
}

.infoboxemain .infoboxes .image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

html css svg mobile-website static-site
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.