將圖像拉伸到瀏覽器邊緣並自動調整瀏覽器大小

Question

我是新來的HTML和CSS，我搜索了類似的問題，但找不到符合我的情況的問題。我正在製作我的投資組合頁面，並希望顯示像本網站那樣的縮略圖/圖像：http://knockinc.com/work/

圖像之間沒有差距，它們伸展到瀏覽器邊緣。圖像也會隨着瀏覽器的大小成比例地調整大小。

下面是我到目前爲止的一個示例：https://codepen.io/jennycysun/pen/BwrWzb?editors=1100 我想連續放置3個圖像。 （我只允許張貼在這裏的CSS代碼，使HTML和CSS代碼，請訪問上面的codepen鏈接）。

body{ 
margin: 0; 
padding: 0; 
} 

.puppies ul{ 
list-style-type:none; 
padding: 0; 
margin-top: 50px; 
} 

.puppies li{ 
display: inline-block; 
postition: absolute; 
left: 0; 
right: 0; 
margin: -2px; 
margin-top: -4px; 
} 

img{ 
max-width: 100%; 
} 

我無法弄清楚如何使圖像達到的邊緣瀏覽器並自動調整大小。請建議我。非常感謝！

Answer 1

你可以這樣說：

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.puppies { 
 
    column-count: 3; /* three images in a row */ 
 
    column-gap: 0; /* change this if you want gaps between images */ 
 
    page-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
} 
 
/* settings for responsive images, keeps the ratio as it is */ 
 
.puppies > img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
@media screen and (max-width: 768px) { 
 
    .puppies { 
 
    column-count: 2; /* two images in a row */ 
 
    } 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .puppies { 
 
    column-count: 1; /* one image in a row */ 
 
    } 
 
}

<div class="puppies"> 
 
    <img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg" alt=""> 
 
    <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" alt=""> 
 
    <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" alt=""> 
 
    <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" alt=""> 
 
    <img src="http://tailandfur.com/wp-content/uploads/2016/10/40-Amazing-Poodle-Dog-Puppy-Pictures-2.jpg" alt=""> 
 
</div>

我建議你總是使用的圖像具有相同的寬度和高度，但是這取決於你， 不是強制性的。您可以根據自己的需要調整媒體查詢屏幕寬度，但現在使用的寬度相當普遍。如果您需要任何其他幫助，請告訴我。

Answer 2

圖像，則不應使用特定的寬度和高度，在CSS代碼添加比例如下圖所示

CSS

.puppies li{ 
    display: inline-block; 
    postition: absolute; 
    left: 0; 
    right: 0; 
    margin: -2px; 
    margin-top: -4px; 
width:20%/*Just add this line*/ 
} 

HTML

<div class=puppies> 
<ul> 
    <li><img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg"></li> 
    <li><img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" ></li> 
    <li><img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg"></li> 
    <li><img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg"></li> 
    <li><img src="http://tailandfur.com/wp-content/uploads/2016/10/40-Amazing-Poodle-Dog-Puppy-Pictures-2.jpg"></li> 

編輯 試試這個CSS代碼

.puppies li{ 
    display: inline-block; 
    postition: absolute; 
    left: 0; 
    right: 0; 
    margin: -2px; 
    margin-top: -4px; 
    width:33.33%; 
    max-height: 300px; 
    overflow: hidden; 
    vertical-align: top; 
}