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

标签 html css css-transforms

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 7 年前

在下面的代码中<span>有一张我想调整大小的图片。此外,wrapper 应该采用调整后图像的高度,而不是采用原始图像的大小。此外,此问题仅发生在 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");
}

知道如何将 wrapper 的高度设置为 visa01 的新高度。

最佳答案

乍一看问题是由于 transform 属性引起的。我不确定为什么在声明静态 heightwidth 时要使用 transform 属性。尝试省略 transform 来代替手动调整的 heightwidth (因为无论如何你都是静态声明的)你可能不再有这个原始图像“容器”可以说是获得设定尺寸,但随后被转换(并且新尺寸现在由 wrapper 拾取)的问题。

关于html - 如何使父容器调整其高度以仅使用 css 匹配缩放的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36145190/

上一篇:javascript - 有人可以帮我解决这个错误吗?

下一篇:css - 如何使 block 占据所需的最小宽度?

相关文章:

php - 管理页面不会显示

css - 如何使用 CSS 变换以正确的视角将两个或多个立方体并排放置?

css - Animation then transform,两个连续的动画

javascript - focus() 在隐藏 div 内的输入上不起作用

html - 在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏

javascript - 每个选项卡的 Ajax 调用函数

css - Blueprint CSS Framework/Sticky Footer with IE6 问题

javascript - jQuery 拖动/调整大小与 CSS 变换比例

javascript - 网站性能测试 : How best to approximate computer performance?

html - CSS3 垂直弹出菜单 + 过渡在 FF 中不起作用