Question

在以下代码<span>中有一个我想要重新调整大小的图像。此外，包装器应采用已调整大小的图像的高度，而不是原始图像的大小。此问题也只发生在firefox中。

HTML

<div class="wrapper">
    <label> India </label>
    <span class="visa visa01"></span>
</div>

CSS

.wrapper {
    width: auto;
    border-radius: 3px;
    background: #dadada none repeat scroll 0% 0%;
    padding: 2px 10px;
    display: inline-block;
    float: left;
}
label {
    display: inline-block;
    max-width: 100%;
}
.visa {
    width: 1.6em;
    top:1px;
    position: relative;
}
.visa01 {
    content: url("/images/waww/resume/visa01.png");
}
.visa01:after {
    position: relative;
    top: 25px;
    width: 70px;
    height:50px;
    display: inline-block;
    transform: scale(0.4);
    content: url("/images/waww/resume/visa01.png");
}

任何想法如何使包装纸的高度成为visa01的新高度。

Answer 1

乍一看，这个问题归因于transform属性。在声明静态transform和height时，我不确定您为什么要使用width属性。尝试省略transform代替手动调整的height和width（因为无论如何你都是静态声明这些）并且你可能不再有这个问题的原始图像＆＃34;容器＆＃34;所以说是获取设置尺寸，然后再transform编辑（现在wrapper拾取了新尺寸）。

如何使父容器调整其高度以匹配仅使用css的缩放div

1 个答案: