基於視口高度的圖像列表，根據比例調整大小

我希望縮放到視口高度的一列圖像保持高寬比。基於視口高度的圖像列表，根據比例調整大小

我有一個工作演示：https://codepen.io/garethj/pen/qrjjvp

我的問題是鏈接不會在圖像周圍包裹，所以hitzones太大（並且將與其他UI元素干擾）。設置一個標籤顯示：塊包裝圖像，但殺死調整大小。

是否有另一種方法來解決這個問題？

<section id="projects"> 

<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a> 
<h2>Project one</h2> 


<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a> 
<h2>Project two</h2> 

</section>

CSS：

html, 
body, 
#projects { 
    height: 100%; 
    margin: 0; 
} 

#projects { 
    margin: auto 5%; 
    text-align: center; 

} 

h2 { 
    margin: 20px 0 100px 0; 
    font-weight: normal; 
    font-size: 20px; 
} 

img { 
    display: block; 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: calc(100% - 200px); 
    margin: 0px auto; 
    padding-top: 100px; 
}

https://codepen.io/garethj/pen/qrjjvp

來源

2017-03-14 user1059511

你是什麼意思的'鏈接沒有環繞圖像'？它在我看來，他們是。 – Jackson

如果您將鼠標移動到圖像之外，仍然可以單擊該鏈接 - 它在大屏幕上非常明顯。 – user1059511

改變了你的顯示器內聯，和你的填充，頂部邊距。

img { 
    display: inline; 
    margin-top: 100px; 
}

https://codepen.io/anon/pen/MpEdzV

它不能解決您的問題？

來源

2017-03-16 11:49:57 Stavm

它確實如此，謝謝。你能解釋爲什麼這個工作嗎？ – user1059511

您將您的img的顯示設置爲塊，這會將元素的寬度固定爲其父元素的寬度，並且您添加了padding-top而不是margin-top，從而使圖像上方的區域成爲元素的一部分，而不是與元素無關間隙。 – Stavm

像這樣的事情？

html, 
 
body, 
 
#projects { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#projects { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 50%; 
 
    
 
} 
 

 

 
h2 { 
 
    margin: 20px 0 100px 0; 
 
    font-weight: normal; 
 
    font-size: 20px; 
 
} 
 

 
img { 
 
    display: flex; 
 
    width: auto; 
 
    height: 100vh; 
 
    max-width: 100%; 
 
    margin: 0px auto; 
 
    padding-top: 100px; 
 
} 
 

 
@media (max-width: 900px) { 
 
    img { 
 
    max-height: calc(100% - 0px); 
 
    padding-top: 0px; 
 
    } 
 
    
 
    h2 {margin-bottom:0px;} 
 
} 
 

 

 
/* demo stylin' */ 
 

 
body { 
 
    font-size: 24px; 
 
    font-family: arial; 
 
    font-weight: normal; 
 

 
}

<section id="projects"> 
 

 
<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a> 
 
<h2>Project one</h2> 
 

 

 
<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a> 
 
<h2>Project two</h2> 
 

 
</section>

來源

2017-03-14 10:37:24 Ashwin

鏈接確實包裹了圖像，但圖像不再縮放到視口高度 – user1059511

我添加了一個編輯。現在檢查。 – Ashwin

歪曲圖像：https://codepen.io/garethj/pen/evEJmd – user1059511

試試這個。
添加一個類的標籤<a>到您的css代碼a{display:inline-block;}。
用max-width:300px; width:100%編輯類別img{}。
圖像將顯示在最大寬度300px但它們將被調整大小，如果他們需要它。

img { 
    display: block; 
    width: auto; 
    height: auto; 
    width: 100%; 
    max-height: calc(100% - 200px); 
    margin: 0px auto; 
    padding-top: 100px; 
    max-width:300px 
} 
a{display:inline-block;}

讓我知道如果作品。

來源

2017-03-16 11:58:08 Roy

基於視口高度的圖像列表，根據比例調整大小

回答

相關問題