Question

如何使以下图像响应？当我试图去除高度＆amp;宽度，图像刚刚消失。

我正在使用CSS创建图像映射，因为我不想使用HTML MAP。

我想创建一个自适应图像。

＆＃13;

<div class="img-responsive" style="position:relative; height:1122px; width:779px; background:url(https://image.ibb.co/eZWkb7/0001.jpg) 0 0 no-repeat;">
  <a style="background-color:red;position:absolute; top:319px; left:198px; width:61px; height:56px;" title="" alt="" href="1" target="_self"></a>
</div>

＆＃13;

Answer 1

你应该尝试使宽度：100％，而不给出高度属性。这应该会使你的元素响应。

提示：你应该考虑将你的风格放在一个单独的CSS文件中。

Answer 2

自动调整响应式图像以适应屏幕大小。

如果您想创建自动适合您的主题大小的自适应图像，那么您应该添加CSS类（.responsive），如下所示。

.responsive {
    width: 100%;
    height: auto;
}

添加CSS类后，您需要在HTML中使用响应式类，如下所示。

<img src="nature.jpg" alt="Nature" class="responsive">

CSS - 移除高度

2 个答案: