화면 넓이가 아닌 CSS 유체 폭 중심 이미지

안녕하세요. 다이어그램에서 레이아웃을 수행하는 방법에 대한 아이디어가 있습니까? 중간 이미지가 뷰포트의 가운데에 있고 최대 너비가 1200 픽셀 인 등 폭의 이미지 3 개.

다른 두면의 이미지가 부분적으로 화면에 나타납니다.

브라우저 창이 1200px 이하로 축소되면 중앙 이미지가 화면을 채우고 창의 너비에 따라 축소됩니다.

CSS를 혼자서 사용하는 가장 좋은 방법은 무엇입니까?

감사합니다.

출처

2017-09-18 Nick

* 실제 * 이미지 또는 배경 이미지입니까? –

최종 효과가 달성되는 한 그 중 하나 일 수 있습니다! – Nick

이 이미지는 정적입니까, 아니면 이미지가 움직입니까? –

flex 및 justify-content은 max-width에 있습니다. :hover 및 shadow에

애니메이션 내가 몇 가지 실험 후 해결책을 발견

#layout { 
 
    max-width: 1200px; 
 
    width: 100%; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
#layout img { 
 
    min-width: 100%; 
 
    max-width: 100%; 
 
} 
 

 

 
/* demo purpose */ 
 

 
#layout { 
 
    border: solid; 
 
    box-shadow: 0 0 0 50vw rgba(255, 255, 255, 0.5) 
 
} 
 

 
#layout img { 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 

 
#layout:hover img:first-of-type { 
 
    animation: slide 6s infinite steps(3); 
 
} 
 

 
@keyframes slide { 
 
    from { 
 
    margin-left: 200%; 
 
    } 
 
    to { 
 
    margin-left: -400%; 
 
    } 
 
} 
 

 
body { 
 
    overflow-x: hidden 
 
}

<div id="layout"> 
 
    <img src="http://lorempixel.com/600/200/food" /> 
 
    <img src="http://lorempixel.com/600/200/people" /> 
 
    <img src="http://lorempixel.com/600/200/fashion" /> 
 
</div>

출처

2017-09-18 19:21:53

이 솔루션을 이용해 주셔서 감사합니다! 크기가 줄어들 때 이미지의 높이가 비례하지 않는다는 점을 제외하고는 거의 원했던 것입니다. 또한 더 나은 브라우저 지원을 위해 flex를 사용하지 않기를 원할 것입니다. 내가 게시 한 이후 실험을 해본 결과 – Nick

@Nick 아래에 게시 할 다른 솔루션을 찾았습니다. 플렉스를 제거하고 공백을 추가 할 수 있습니다 : nowrap, 첫 번째 이미지의 margin-left가 수행합니다. flex는 그 자체를 집중 시켰습니다. 원한다면 여기에 예제가 있습니다. mediaquerie를 통해 https://codepen.io/gc-nomade/pen/XeXgOB 중단 점을 추가 할 수도 있습니다. –

행동을 보여주기 위해 샘플에 추가됩니다. 핵심은 1200px 미만의 측면 이미지가 화면에 전혀 표시되지 않으므로 숨길 수 있다는 것을 깨닫게되었습니다. 단지 중심 이미지를 100 %로 만듭니다.

3600px 와이드 절대 위치 컨테이너에 3 개의 이미지를 모두 래핑하고 왼쪽 중앙 50 %, 왼쪽 가장자리 -1800px로 센터링합니다.

1200px 이하에서는 이미지 2와 3을 모두 숨기고 컨테이너를 상대적으로 100 % 너비로 배치합니다.

출처

2017-09-18 19:56:21 Nick

화면 넓이가 아닌 CSS 유체 폭 중심 이미지

답변

관련 문제