이미지를 브라우저 가장자리까지 늘리고 브라우저 크기에 맞게 자동으로 크기 조정

Question

HTML과 CSS가 처음인데 비슷한 질문을했지만 내 상황에 맞는 것을 찾을 수 없었습니다. 내 포트폴리오 페이지를 만들고 있는데이 웹 사이트와 같은 미리보기 이미지를 표시하고 싶습니다. http://knockinc.com/work/

이미지 사이에는 간격이없고 브라우저 가장자리까지 늘어납니다. 이미지는 브라우저 크기에 비례하여 크기가 조절됩니다.

여기까지의 예는 다음과 같습니다. https://codepen.io/jennycysun/pen/BwrWzb?editors=1100 최대 3 개의 이미지를 연속으로 표시하고 싶습니다. 은 (난 단지, 위의 codepen 링크를 방문하시기 바랍니다 HTML과 CSS 코드, 그래서 여기에 CSS 코드를 게시 할 수 있어요.)

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

당신은 이런 식으로 그것을 할 수있는이 CSS 코드를 사용해보십시오 :

* {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

당신은 이미지의 특정 폭과 높이를 사용하고

<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> 

HTML

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

CSS

아래 편집과 같은 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; 
}