Question

一旦视口达到600px，我就将div / image设置为使用min-width停止缩放。基本上我不希望图像在移动设备上看起来太小，并且很高兴它们在侧面被“裁剪”，只要看到图像的中心那么长。当使用媒体查询达到600px时，我也不希望它完全启动。

任何帮助将不胜感激！

Answer 1

您可以使用translateX和相对定位。

min-width:600px;    
position:relative;
left:50%;
transform:translateX(-50%);

Answer 2

使用css属性max-width：100％;和高度：自动图像将自动缩放，您需要做的就是将此属性赋予图像或其类

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

Answer 3

没有一个小例子帮助很棘手，但...... 图像实际上很聪明，可以自行扩展。

你的加价：

.myDiv{
  max-width: 300px; // or your other media query settings
  width:100%;
  position: relative;
}
.myDiv img{
  width: inherit; // to set image width
  position:absolute; // to respond to relative
  left:-50%; // to center
}

<div class="myDiv">
    <img src="<your src here>"  />
</div>

想法是为图像提供宽度并使用相对/绝对来适当地定位它。将这些样式用于媒体查询

一旦达到最小宽度，如何使div / img仍然居中

3 个答案: