CSS高度：自动不显示响应图像答案

【问题标题】：css height:auto not showing for responsive imageCSS高度：自动不显示响应图像
【发布时间】：2015-12-31 11:55:42
【问题描述】：

我想在我的文档中创建一个响应式图片。

<style>
img,.img {
    width: 80%;
    height: auto;
}
</style>

<body>
    <div>
        <img src="img/tools3/2.png" />
    </div>
<body>

现在我尝试将 img 转换为 div：

<body>
        <div>
            <div class="img" style="img/tools3/2.png"></div>
        </div>
<body>

但没有显示任何图像！

如果我将 height: auto; 更改为 height: 100px; 它可以工作，但它没有响应其他...

我还要补充：

box-sizing: border-box;
clear: both;

到 .img 但不工作。

【问题讨论】：

为什么要在 div 中加载图像？如果您想这样做，请考虑使用 css 制作 background-image: url(urlPath);但我认为这不会是响应式的，第一个代码最适合响应式图片
考虑从这里开始您的故障排除：style="img/tools3/2.png"，这是无效的代码。
因为我想用悬停改变图像

标签： html css image responsive-design

【解决方案1】：

你不需要div中的图片，你可以在img标签中拥有它。

img 标签可以使用 css 在悬停时更改

.img:hover {
   content:url(NEWPICPATH);
}

有关以这种方式更改 src 的更多详细信息，请参阅 this answer。

【讨论】：

【解决方案2】：

要制作响应式图像，您需要将 max-width 属性设置为 100%。除非您决定在 div 上使用 background-image，否则图像始终必须是 img 标签。

【讨论】：

【解决方案3】：

你要做的就是这个...... 在 html 中 ....

<div style="width:50%;height:50%">
        <img style="width:100%; height:100%;"  src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
    </div>

您可以为 div 指定任何高度或宽度。如果您愿意，可以在外部样式表中使用样式。我建议你试试 bootstrap。它很简单。

【讨论】：

【解决方案4】：

看下面

    <div>
        <div class="img" style="img/tools3/2.png"></div>
    </div>

图片不会显示，因为

你有

样式为"img/tools3/2.png"

一个 div 是一个可以容纳图像的容器，它没有像指向链接的图像标签那样的源属性。

如果你想让图像像 div 一样显示，你可以这样做

img{
    display:block
}

不过你也可以设置一个 div 背景来制作这样的图片

div {
  width:put your width here;
  height: put yout height here;
  background-image:url("url here");
  background-size: cover;
}

这是一个

div {
  width:500px;
  height:500px;
  background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
   background-size: cover;;

<div>

</div>

【讨论】：