如何保持全寬圖像的高寬比，直到特定的高度，但隨後的作物高度？

我希望我的圖像保持其全寬和縱橫比，直到它們達到600像素的高度，此時他們裁剪高度（並仍保持全寬）。這對我來說很棘手，因爲我想避免使用background-image來實現我的目標。如何保持全寬圖像的高寬比，直到特定的高度，但隨後的作物高度？

我的大部分圖像都是1920x1080縱橫比，所以一旦屏幕變得比1070px小，默認的縱橫比應該沒問題。對於1070px屏幕，圖像可以自動縮放爲1070x600，對於800px屏幕，圖像可以自動縮放爲800x450，對於400px屏幕，圖像可以自動縮放爲，依此類推。都好。

但是，一旦屏幕大於1070px，默認寬高比不再適用於我，因爲高度小於600px。我想的圖像自動裁剪到600px高度在這一點上，保持整個寬度不變：

爲1920px屏幕：裁剪圖像以1920x600
爲1500px屏幕：裁剪圖像爲1500x600

依此類推。

add_image_size('jd-custom-size', 1920, 600, true);是不夠的，因爲在一個小屏幕上，即800px，它會將圖像裁剪爲800x250。

add_image_size('jd-custom-size', 9999, 600, true);會產生同樣的問題。

我確定我不是第一個擁有這個目標的人，但我不太確定如何谷歌它。大多數搜索查詢只是出現基本的add_image_size問題。

任何想法？

來源

2017-10-11 John

我覺得你可以通過檢測第一屏幕尺寸 – DaFois

最大高度+對象配合dinamically改變形象，或只是最大高度，如果一個容器包裝他們...任何代碼/片段分享和展示你的實際問題？ :)爲html/css的一部分，否則你也有http://php.net/manual/en/function.imagecrop.php結合srcset在HTML也可能是有用的加載替代圖像 –

G-Cyr，這是正是我需要的。此線程上的其他響應可以工作，但僅限於特定的斷點。這個作物每次作物1px，直到達到1070px的屏幕，此時我可以關閉高度限制。如果您想發佈正式答案，我會將其標記爲正確。我基本上在圖像周圍設置了一個div，添加了'width：100％; height：600px;'給div，然後給img'width：100％;身高：100％;然後在我現有的1024像素媒體查詢中，我給了div'height：100％;'來移除它的600像素限制，它的效果非常好。 – John

你看過使用CSS剪輯，結合媒體查詢和解決方案可能只是CSS。

@media only screen and (min-width : 1500px) { 
.myimg{ 
    position: absolute; 
    clip: rect(0px,1500,600px,0px); 
} 
} 

@media only screen and (min-width : 1960px) { 
    .myimg{ 
     position: absolute; 
     clip: rect(0px,1960,600px,0px); 
    } 
    }

另外，您可以使用JavaScript來獲得更多的具體設置

$(".myimg").css("clip",'rect(0px,1960,600px,0px)');

基於屏檢測寬度的

？

來源

2017-10-11 15:25:36

您可以使用新的srcset和sizes HTML屬性來實現，通過只是路過裁剪後的圖片src每個分辨率你想要的：

<img srcset="yourimage-320h.jpg 320h, 
      yourimage-480w.jpg 480w, 
      yourimage-800w.jpg 800w" 
    sizes="(max-width: 320px) 280px, 
      (min-width: 480px) 440px, 
      800px" 
    src="yourdefaultimage-800w.jpg">

你可以設置你想要w和h任何單位意味着，真實的圖片width和真實圖片height。

相關鏈接：

來源

2017-10-11 15:29:15

如何保持全寬圖像的高寬比，直到特定的高度，但隨後的作物高度？

回答

相關問題