CSS 만 사용하여 div 내에서 대형 이미지를 가운데에 배치하는 방법을 정렬하려고했습니다.
유동적 인 레이아웃을 사용하고 있으므로 이미지 컨테이너의 너비는 페이지 너비에 따라 달라집니다 (div의 높이는 고정되어 있음). 이미지는 페이지에서 페이지를 보는 것처럼 보이도록 삽입 상자 그림자가있는 div 안에 있습니다.
이미지 자체는 가능한 가장 넓은 값 (디자인에 max-width값이 있음)으로 주변 div를 채우도록 크기가 조정되었습니다 .
이미지가 주변 div보다 작은 경우 매우 쉽습니다.
margin-left: auto;
margin-right: auto;
display: block; 그러나 이미지가 div보다 크면 왼쪽 가장자리에서 시작하여 오른쪽 중앙에서 벗어납니다 (우리는 사용 중입니다 overflow: hidden).
우리는을 할당 할 수 width=100%있지만 브라우저는 이미지의 크기를 조정하고 웹 디자인 센터는 고품질 이미지를 중심으로합니다.
이미지를 overflow:hidden중앙에 배치하여 양쪽 가장자리를 고르게 자르는 아이디어가 있습니까?
답변
이와 같은 것을 시도하십시오. 크기에 관계없이 부모와 관련하여 세로 및 가로 가운데에 큰 요소가 가운데에 있어야합니다.
.parent {
position: relative;
overflow: hidden;
//optionally set height and width, it will depend on the rest of the styling used
}
.child {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}답변
이것은 오래된 Q이지만 flexbox 또는 위치 절대가없는 현대적인 솔루션은 다음과 같이 작동합니다.
margin-left: 50%;
transform: translateX(-50%);왜 작동합니까?
언뜻보기에 우리는 오른쪽으로 50 %, 왼쪽으로 다시 50 % 이동합니다. 그러면 제로 시프트가 발생하므로 어떻게해야합니까?
그러나 상황이 중요하기 때문에 50 %는 동일하지 않습니다. 상대 단위를 사용하는 경우 여백은 부모 요소 너비의 백분율로 계산되며 변환은 동일한 요소에 대해 50 % 입니다.
CSS를 추가하기 전에 이런 상황이 있습니다
+-------------------------------------------+
| Parent element P of E |
| |
+-----------------------------------------------------------+
| Element E |
+-----------------------------------------------------------+
| |
+-------------------------------------------+추가 된 스타일로 margin-left: 50%우리가
+-------------------------------------------+
| Parent element P of E |
| |
| +-----------------------------------------------------------+
| | Element E |
| +-----------------------------------------------------------+
| | |
+---------------------|---------------------+
|========= a ========>|
a is 50% width of P그리고 transform: translateX(-50%)왼쪽으로 이동
+-------------------------------------------+
| Parent element P of E |
| |
+-----------------------------------------------------------+
| Element E | |
+-----------------------------------------------------------+
|<============ b ===========| |
| | |
+--------------------|----------------------+
|========= a =======>|
a is 50% width of P
b is 50% width of E불행하게도 이것은 마진 백분율 계산이 항상 너비를 기준으로하기 때문에 수평 중심에 대해서만 작동합니다. 즉뿐만 margin-left하고 margin-right, 또한 margin-top와 margin-bottom폭에 대해 계산된다.
브라우저 호환성은 문제가되지 않습니다 :
https://caniuse.com/#feat=transforms2d
답변
div 안에 큰 div를 넣고 가운데에 이미지를 중앙에 배치하십시오.
가로로 가운데에 배치됩니다.
HTML :
<div class="imageContainer">
<div class="imageCenterer">
<img src="http://placekitten.com/200/200" />
</div>
</div>CSS :
.imageContainer {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.imageCenterer {
width: 1000px;
position: absolute;
left: 50%;
top: 0;
margin-left: -500px;
}
.imageCenterer img {
display: block;
margin: 0 auto;
}데모 : http://jsfiddle.net/Guffa/L9BnL/
수직으로 중앙에 배치하려면 내부 div에 동일한 것을 사용할 수 있지만 이미지를 절대적으로 안에 넣으려면 이미지의 높이가 필요합니다.
답변
게임에 늦었지만이 방법이 매우 직관적이라는 것을 알았습니다.
https://codepen.io/adamchenwei/pen/BRNxJr
CSS
.imageContainer {
border: 1px black solid;
width: 450px;
height: 200px;
overflow: hidden;
}
.imageHolder {
border: 1px red dotted;
height: 100%;
display:flex;
align-items: center;
}
.imageItself {
height: auto;
width: 100%;
align-self: center;
}HTML
<div class="imageContainer">
<div class="imageHolder">
<img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
</div>
</div>답변
이미지 태그에 고정 된 너비 나 높이를 사용하지 마십시오. 대신 코드를 작성하십시오.
max-width:100%;
max-height:100%;답변
나는 이미지를 div / node의 배경으로 만드는 것을 좋아합니다. 그런 다음 background-position: center화면 크기에 관계없이 속성을 사용하여 중앙에 배치 할 수 있습니다
답변
너비와 높이는 예를 들어 다음과 같습니다.
parentDiv{
width: 100px;
height: 100px;
position:relative;
}
innerDiv{
width: 200px;
height: 200px;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}부모 div의 왼쪽과 상단이 화면 창의 맨 위와 왼쪽이 아닌 경우 작동해야합니다. 그것은 나를 위해 작동합니다.
