将图像高度设置为 100%，将宽度设置为自动在 Safari 中不起作用答案

【问题标题】：Set image height to 100% and width to auto not working in Safari将图像高度设置为 100%，将宽度设置为自动在 Safari 中不起作用
【发布时间】：2014-05-10 19:54:59
【问题描述】：

我正在尝试将图像放入 div 中，我已放入 width: auto; 和 height: 100%;。这在 Chrome 和 FireFox 中运行良好，但在 Safari 中不行，我敢在 IE 中检查！我应该改变什么？？

    <div class="row">
    <div class="col-md-12">
        <div class="loggo-title" href="<?php bloginfo('url'); ?>">
            <img src="<?php bloginfo('template_directory'); ?>/img/header.png" height="100%" width="auto"/>
        </div>
    </div>
</div>

我也尝试过用css方式实现

img { 
  height: 100%; 
  width: auto;
}

提前致谢！汉内斯

【问题讨论】：

你想把图像 100% 放在你的 div 中吗？是的，为什么不在你的 div 中使用 background-image？
当您尝试使用 css 时，您是否从 img 标签中删除了高度和宽度属性？如果不尝试。另外我不认为 href 是 div 的有效属性（但我可能错了）
哦，这肯定是一个愚蠢的错误，谢谢@Pete！是的，我确实删除了宽度和高度属性，遗憾的是它也没有工作。 :(
刚刚注意到您的.loggo-title 仅包含您的图像，因此除非您专门为该 div 设置了高度，否则您的图像将设置为 0 高度，因为您的 div 将没有高度（并且您的图像将是 0 的 100%）
就是它！谢谢@皮特！！ :)

标签： html css safari twitter-bootstrap-3

【解决方案1】：

如果您希望图像保持相同的纵横比，也可以尝试宽度 100%

【讨论】：

感谢您这么快回复！问题是它是一个文本图像，所以我需要它保持一定的宽度并且只取决于高度。如果我把 100% 的宽度和高度设置为 auto，它会非常大....
然后尝试 50% 的图像，那么它将始终是一半，我建议使用百分比进行环绕，因为宽度是自动的，它在各种浏览器中可能看起来非常失真 @HannesH跨度>
这对我来说不会保持纵横比，如果父级具有不同的尺寸，这很有意义。

【解决方案2】：

你试过在宽度上不写任何东西吗？我会尝试写作：

<img src="<?php bloginfo('template_directory'); ?>/img/header.png" height="100%" width=""/>

img { height:100% }

它对我有用！

【讨论】：