Question

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

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />



<style name="MyStyle">
    <item name="android:textColor">#FF255F26</item>
</style>

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

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

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

但没有显示任何图像！

如果我将<body> <div> <div class="img" style="img/tools3/2.png"></div> </div> <body>更改为height: auto;，那么它可以正常工作，但它没有其他响应......

我还补充说：

height: 100px;

到.img但没有工作。

Answer 1

要执行自适应图像，您需要将max-width属性设置为100％。除非您决定在div上使用背景图像，否则图像必须始终为img标记。

Answer 2

你不需要div中的pic，你可以在img标签中使用它。

可以使用css

在悬停时更改img标记

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

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

Answer 3

看下面的

    <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>

Answer 4

你需要做的就是这...... 在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.it非常简单。

css height：自动不显示响应式图像

4 个答案: