如何使div/img仍居中一次達到最小寬度

Question

一旦視口達到600px，我已設置div/image停止使用最小寬度縮放。基本上我不希望圖片在移動時看起來太小，並且很高興他們能夠在兩側「裁剪」，只要看到圖像的中心就可以了。我也不希望它在媒體查詢時到達600px的時候正好踢出。

任何幫助，將不勝感激！

Answer 1

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

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

Answer 2

隨着CSS屬性最大寬度：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> 

思想是提供寬度圖像，並使用相對/絕對適當地定位。 爲您使用這些樣式媒體查詢