0
응답 성있는 웹 사이트를 만들려고하고 있으며 2 행 (3 행당 3 이미지)의 이미지가있는 홈 페이지를 만들어야합니다.이 이미지는 화면을 작게 만듭니다. 6 개의 이미지가 중앙에 있지만 서로 옆에 3
내가 일하고 있어요 무엇의 예
가에서 볼 수 있습니다 : 화면이 작게 만들 때 http://www.mijncreaties.com/opstal/, 당신은 이미지가 사람 하나 하나 아래에 밀어 방법을 참조하십시오. 그러나 이미지가 옆에있는 슬라이드 바로 아래에 있기 때문에 오른쪽에 작은 간격이 있습니다 (모두 왼쪽에 정렬되어 있기 때문입니다).
이미지의 너비는 330 픽셀이며 페이지의 최대 너비는 1000 픽셀입니다. 페이지를 990 픽셀 (980 픽셀이라고 말하면 됨)보다 작게 만들면 오른쪽 이미지가 나머지 이미지 아래에 미끄러집니다. 하지만 320px의 차이가 있습니다. 이미지가 작아 보이지만 알아 차릴만큼 커야합니다. 왼쪽의 두 이미지가 중앙에 정렬 될 수 있다면 틈을 약간 채울 것입니다.
전체 폭 :
[image] [image] [image]
[image] [image] [image]
작은
[image] [image]-small gap-
[image] [image]-small gap-
[image] [image]-small gap-
작은
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
는 이미지가 항상 페이지의 중앙에되도록 그것을 확인하는 것이 가능하지만, 여전히 슬라이드 화면이 작아지면 서로 아래에 있습니까?
가 같이 할 수있는 방법의예 : (중심)
| [image] [image] |
| [image] [image] |
아니면 : :이처럼 좋아하는 데 싶습니다
| [image] [image] |
| [image] [image] |
(가 조금 스트레칭 만들기)
| [ image ] [ image ] |
| [ image ] [ image ] |
나는 디스플레이를 시도했다 : 블록, 여백 - 왼쪽 : 자동, 여백 - 오른쪽 : 자동,하지만 이것은 모든 이미지를 서로의 아래에 배치한다. 페이지가 최대 폭에 있습니다.
누군가가 나에게 창의 크기를 조정할 때 이미지가 축소되고 특정 크기로 커지는 방식에 대한 작동 예제를 제공 할 수 있다면 작동 할 수도 있습니다.
<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a>
CSS의 :
img.size-full, img.size-large {
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
margin-bottom: 18px;
}
이미지가 들어있는 div에'text-align : center'를 설정할 수 있습니다 :'.entry-content {text- align : center}' – blonfu
화면을 다시 볼 때 이미지가 같은 크기로 유지됩니까? 크기 또는 백분율 너비가 될 것인가? – Pete
현재 그들은 같은 크기를 유지하고 있지만 크기를 조정할 때 성장을 제어하는 방법을 알고 있다면 잘 작동 할 수도 있습니다. 나는 그걸하는 법을 정말로 모른다. –