css - 调整窗口大小时，如何使 div 标签内的图像响应？

Question

我目前在一个 div 中有这个箭头图像，我希望它在我调整它的大小时响应我的页面。我有点难以解释，但这就是我想要实现的目标 This is when it is in full screen . This is when it is minimized我已经尝试使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">使其响应，但它不起作用。

#secondArrow {
  position: absolute;
  visibility: visible;
  top: 530px;
  right: 340px;
  margin: auto 5px;
  z-index: 1;
}

<div id="secondArrow">
  <a href="javascript:showImage()"><img src="http://lorempixel.com/100/100/" alt="" width="100" height="100"></a>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

如果您使用 Bootstrap 或为 img max-width: 100%, height: auto, and display:block 编写此 css，请将 class="img-responsive"添加到您的 img 标签`

.img-responsive{
max-width: 100%; 
height: auto;
display:block
}

<img class="img-responsive" src=""> 

`