如何使div/img在达到最小宽度后仍然居中?

Question

一旦viewport达到600px，我已经设置div/image停止使用min-width缩放。基本上，我不希望图像在移动设备上看起来太小，并且很高兴它们在侧面被"裁剪"，只要看到图像的中心即可。我也不希望它在媒体查询中正好达到600px时启动。

任何帮助将不胜感激!

Answer 1

使用css属性max-width:100%;height:auto图像会自动缩放，你只需要把这个属性赋给image或者它的类

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

Answer 2

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

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

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>

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