가운데 오버사이즈 이미지(Div)
저는 css만을 사용하여 div 내에서 오버사이즈 이미지의 중심을 잡는 방법을 분류하려고 노력해왔습니다.
우리는 유동적인 레이아웃을 사용하고 있기 때문에 페이지 폭에 따라 이미지 용기의 폭이 달라집니다(div의 높이는 고정됨).이미지는 div 내에 위치하며, 마치 페이지를 통해 이미지를 보는 것처럼 보이도록 삽입된 상자 그림자의 값이 표시됩니다.
한 한 넓은 에는 되었습니다(max-width값).
이미지가 주변 디브보다 작은 경우에는 매우 쉽게 수행할 수 있습니다.
margin-left: auto;
margin-right: auto;
display: block;
큰()를 합니다).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이지만 플렉스박스나 포지션이 절대적이지 않은 (2016년 기준) 현대적인 솔루션은 이렇게 작동합니다.
margin-left: 50%;
transform: translateX(-50%);
.outer {
border: 1px solid green;
margin: 20px auto;
width: 20%;
padding: 10px 0;
/* overflow: hidden; */
}
.inner {
width: 150%;
background-color: gold;
/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;
/* Move to the left by 50% of own width */
transform: translateX(-50%);
}<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>그럼 왜 효과가 있을까요?
언뜻 보기에 우리는 오른쪽으로 50% 이동하고 그 다음에 다시 왼쪽으로 50% 이동하는 것 같습니다.그러면 이동량이 0이 됩니다. 그래서 어쩌죠?
그러나 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/ # transform= feats2d
큰 디브를 디브 안에 넣고, 가운데에 이미지를 그 디브 안에 넣습니다.
수평으로 중심을 맞춥니다.
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/
수직으로 중심을 맞추려면 내부 디브에도 동일한 것을 사용할 수 있지만, 이미지의 높이가 있어야 절대적으로 내부에 배치할 수 있습니다.
게임이 늦었지만, 이 방법이 매우 직관적이라는 것을 알았습니다.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>
약간의 유연성과 오버플로우가 숨겨져 있을 경우 간단합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 150px;
width: 150px;
border: 2px solid red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<img src="sun.jpg" alt="">
</div>
</body>
</html>
의 배경으로 만드는 /. 그러면 당신은 그냥 사용할 수 있습니다.background-position: center합니다에 합니다.
이미지 태그에 고정 또는 명시적 너비 또는 높이를 사용하지 마십시오.대신 코드화:
max-width:100%;
max-height:100%;
ex: http://jsfiddle.net/xwrvxser/1/
유연성이 없는 보다 우아한 솔루션임을 알게 되었습니다.
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
할 수 한 과 같습니다.object-fit: cover처럼 행동합니다.background-size: cover. 오브젝트 핏에 대한 자세한 내용.
아래의 모든 JS는 무시하세요. 그건 단지 데모를 위한 것뿐입니다.
여기서 핵심은 포장지 안에 이미지를 설정하고 다음과 같은 속성을 부여해야 한다는 것입니다.
.wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
}
아래에서 포장지의 높이/너비를 변경하여 재생하는 데모를 만들었습니다.영상은 항상 수직 및 수평 중심에 놓이게 됩니다.모체 폭과 높이의 100%를 차지하며 늘리거나 찌그러지지 않습니다.이는 영상의 가로 세로 비율이 유지됨을 의미합니다.변경 사항은 대신 확대/축소하여 적용됩니다.
한 단점object-fitIE11에서는 작동하지 않습니다.
// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');
const resizeWrapper = () => {
wrapper.style.width = widthInput.value + "px";
wrapper.style.height = heightInput.value + "px";
}
button.addEventListener("click", resizeWrapper);.wrapper {
overflow: hidden;
max-width: 100%;
margin-bottom: 2em;
border: 1px solid red;
}
.wrapper img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}<div class="wrapper">
<img src="https://i.imgur.com/DrzMS8i.png">
</div>
<!-- demo only -->
<lable for="width">
Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>@yunzen의 훌륭한 답변을 바탕으로:
이 주제를 검색하는 많은 사람들이 홈페이지 등에서 큰 이미지를 "영웅" 배경 이미지로 사용하려고 하는 것 같습니다.이 경우에는 이미지 위에 텍스트가 나타나고 모바일 장치에서 잘 축소되기를 원하는 경우가 많습니다.
이미지를 완벽한 한 CSS ()에서).<img>태그):
/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;
/* Move to the left by 50% of own width */
transform: translateX(-50%);
/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;
/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;
/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;
/* OPTIONAL - try with/without based on your needs */
top: 0;
/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;
너비 및 높이는 다음과 같은 경우에만 해당됩니다.
parentDiv{
width: 100px;
height: 100px;
position:relative;
}
innerDiv{
width: 200px;
height: 200px;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
부모 디바의 왼쪽과 위쪽이 화면 창의 맨 위와 왼쪽이 아니라면 이 기능은 사용자에게 적합합니다.저한테는 효과가 있어요.
@Guffa에
왜냐하면 2시간 이상의 시간을 지체해서 매우 넓은 이미지의 중심을 잡혔기 때문입니다.
또는 2500x100px트 1600x1200는 풀HD 1900x1200합니다.
.imageContainer {
height: 100px;
overflow: hidden;
position: relative;
}
.imageCenter {
width: auto;
position: absolute;
left: -10%;
top: 0;
margin-left: -500px;
}
.imageCenter img {
display: block;
margin: 0 auto;
}
이것이 다른 사람들이 일을 더 빨리 끝내는 데 도움이 되었으면 좋겠습니다 :)
언급URL : https://stackoverflow.com/questions/14562457/center-oversized-image-in-div
'programing' 카테고리의 다른 글
| 한 하는 중한 하는 중한 하는 중인에인에인에 (0) | 2023.10.08 |
|---|---|
| 여기서 .slice(0)의 의미는 무엇입니까? (0) | 2023.10.08 |
| Invoke-Rest 메서드: 반환 코드를 가져오려면 어떻게 해야 합니까? (0) | 2023.10.08 |
| Nodejs5와 babel에서 "예상치 못한 토큰 가져오기"? (0) | 2023.10.08 |
| AngularJS에서 행을 각각 2개씩 더 반복하는 방법 (0) | 2023.10.08 |