어떻게 하면 디브를 비례감 있게 이미지로 채울 수 있을까요?
이 스레드를 찾았습니다. 이미지의 가로 세로 비율을 유지하면서 <div>를 채우기 위해 이미지를 어떻게 펼치나요?— 그것이 내가 원하는 전부는 아닙니다.
는 을 가지고 .div어느 정도 크기에 그 안에 이미지가 들어가 있는.항상 작성하고 싶습니다.div는 이미지가 가로 또는 세로인지에 관계없이 이미지와 함께 표시됩니다.그리고 이미지가 잘려져 있어도 상관이 없습니다(디브 자체가 오버플로를 숨겼습니다).
그래서 만약 그 이미지가 초상화라면 나는 그것을 원합니다.width되려고100%e.height:auto그래서 비율을 유지합니다.만약 이미지가 풍경이라면 나는 그것을 원합니다.height되려고100%e.width to be auto'. 복잡하죠?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
제가 어떻게 하는지 모르기 때문에 제가 의미하는 바를 간단히 이미지로 만들었습니다.나는 그것을 제대로 묘사할 수도 없습니다.
그래서 제가 이런 질문을 한 건 처음이 아닌가 봅니다.하지만 이에 대한 해결책을 찾을 수 없었습니다.아마도 이것을 할 수 있는 새로운 CSS3 방법이 있을 것입니다. 플렉스박스를 생각하고 있습니다.감 잡히는 게 없어요?예상했던 것보다 더 쉬운 건 아닐까요?
, 하고 가로 세로 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δflexbox당신을 위해 센터링을 해줄 겁니다
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}<div class="fill">
<img src="https://picsum.photos/id/237/320/240" alt="" />
</div>여기 JS Fiddle.
IE9, Chrome 31, Opera 18에서 성공적으로 테스트했습니다.그러나 다른 브라우저는 테스트되지 않았습니다.언제나 그렇듯이 특정 지원 요구사항을 고려해야 합니다.
조금 늦었지만 같은 문제가 생겨서 다른 스택 오버플로우 게시물(https://stackoverflow.com/a/29103071) 의 도움으로 해결했습니다.
img {
object-fit: cover;
width: 50px;
height: 100px;
}
그래도 누군가에게 도움이 되길 바랍니다.
Ps: 과 합니다 합니다 과 max-height,max-width,min-width그리고.min-heightCSS 속성.Light unit을 사용할 때 특히 편리합니다.100%아니면100vh아니면100vw컨테이너 또는 전체 브라우저 창을 채울 수 있습니다.
고정된 의 이 되었습니다 되었습니다 이 의 입니다width그리고.height해결책을 "으로 . "무반응"입니다.
결과를 얻되 이미지 응답성을 유지하기 위해 다음과 같이 사용했습니다.
- 용기 내부에 원하는 비율의 투명한 gif 이미지를 배치합니다.
- 크기를 조정하고 자를 이미지와 함께 이미지 태그 인라인 CSS 배경 지정
.container img{
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="container">
<img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div>
이렇게 하면 됩니다.
img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
이것을 할 수 있는 간단한 방법은object-fit: cover에.
<div class="container">
<img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>
.image {
height: 100%;
width: 100%;
object-fit: cover
}
.container {
height: 100px; /*Set any dimensions you like*/
width: 50px;
}
제가 테스트한 바로는, 이것은 사용할 이미지의 치수에 관계없이 작동하며, 결과가 수직과 수평의 중심에 있기 때문에 질문에서 언급한 것처럼 "Best case"를 만족합니다.
오래된 질문이지만 지금은 방법이 있기 때문에 업데이트할 가치가 있습니다.
은 CSS 의 과 을 사용하는 입니다.object-fit: cover, 작동하는 것은background-size: cover은 . 은 됩니다 과 됩니다 과 은 됩니다 object-positioncentertainment의attribute를 . Entertainment의 attribute입니다.
그러나 IE/Edge 브라우저나 Android < 4.4.4.4에서는 지원되지 않습니다.또한.object-positionSafari, iOS 또는 OSX에서는 지원되지 않습니다.폴리필이 존재합니다. 물체에 맞는 이미지가 가장 적합한 지원을 제공하는 것 같습니다.
속성의 작동 방식에 대한 자세한 내용은 CSS Tricks 기사에서 설명 및 데모를 참조하십시오.
CSS flex 속성을 사용하여 이를 달성할 수 있습니다.아래 코드를 참조하시기 바랍니다.
.img-container {
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
overflow: hidden;
}
.img-container .img-to-fit {
flex: 1;
height: 100%;
}<div class="img-container">
<img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>(IE9+)와 함께 사용하는 것을 고려합니다.background-image. IE8-의 경우 폴리필이 있습니다.
img 태그에서 CSS 속성 object-fit을 사용해야 합니다.
<div class="container">
<img src="some-image.jpg" style="width: 100%; height: 100%; object-fit: cover" />
</div>
.image-wrapper{
width: 100px;
height: 100px;
border: 1px solid #ddd;
}
.image-wrapper img {
object-fit: contain;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}<div class="image-wrapper">
<img src="">
</div> IE에 대한 입니다.object-fit비율을 잃지 않게 해주는 거죠. JS 한 JS을을다e다f을g을여한tastsepobject-fit된음합니다를 합니다.img당분간은svg:
//ES6 version
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('img[data-object-fit]').forEach(image => {
(image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
})
})
}
//ES5 version
if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
(image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
}));
});
}img {
display: inline-flex;
width: 175px;
height: 175px;
margin-right: 10px;
border: 1px solid red
}
/*for browsers which support object fit */
[data-object-fit='cover'] {
object-fit: cover
}
[data-object-fit='contain'] {
object-fit: contain
}<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />참고: 또한 몇 가지가 있습니다.object-fit다재다능한 것들을 만들어 낼 수 있는object-fit일하다.
다음은 몇 가지 예입니다.
시도해 보기:
img {
position: relative;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%);
}
도움이 되길 바랍니다!
해결책은 다음과 같습니다.
<div
style={{
display: "flex",
width: "100%",
height: "100%",
}}
>
<img
style={{
minWidth: "100%",
minHeight: "100%",
objectFit: "cover",
}}
alt=""
src={url}
/>
</div>
위의 내용은 이미지가 상위 컨테이너를 덮을 수 있도록 이미지를 확대합니다.
안에 끼우기만 하면 되면 옷을 갈아입습니다.objectFitcontain.
여기 제 작업 예시가 있습니다.배경-크기:커버 및 배경-위치:센터 중심으로 div 컨테이너의 배경으로 이미지를 설정하는 트릭을 사용했습니다.
가로:100%, 불투명:0으로 이미지를 배치하여 보이지 않게 만들었습니다.자녀 클릭 이벤트를 호출하는 데 특별한 관심이 있어서 이미지를 보여드리는 것입니다.
제가 각도를 사용하고 있지만 전혀 무관하다는 점 참고 부탁드립니다.
<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
<img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
</div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>
결과는 모든 경우에 최적이라고 정의하는 결과입니다.
div를 사용하면 이를 달성할 수 있습니다.IMG 태그 없이 :) 이것이 도움이 되기를 바랍니다.
.img{
width:100px;
height:100px;
background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}
.img1{
width:100px;
height:100px;
background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}<div class="img">
</div>
<div class="img1">
</div>CSSobject-fit: cover그리고.object-position: left center이제 property value가 이 문제를 해결합니다.
전체를 중심으로.이미지 폭이 컨테이너보다 크더라도 전체 이미지를 보여줍니다.저는 JS로만 할 수 있습니다.
게시물의 목적이 아닌 것은 알지만, 제가 여기 왔을 때의 목적이었고, 누군가에게 유용할 수도 있습니다!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
background-color: #000;
}
#container{
position: absolute;
top: 0px;
width: 100vw;
height: 100vh;
text-align: center;
}
#my_img{
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="container">
<img src="images/filename.jpg" id="my_img">
</div>
<script type="text/javascript">
window.onload = function () {
imgElem = document.getElementById('my_img');
if (imgElem.width > document.body.scrollWidth) {
// image is larger than container >> adjust by width and center
imgElem.style.height = 'auto';
imgElem.style.width = '100%';
imgElem.style.position = 'relative';
imgElem.style.transform = 'translateY(-50%)';
imgElem.style.top = '50%';
}
}
</script>
</body>
</html>
제가 이를 달성하기 위해 배운 또 다른 흥미로운 방법은 이미지의 크기와 비율을 조절하기 위해 부모 컨테이너를 사용하는 것입니다.
빈 용기에 패딩 바텀(padding-bottom)을 100% 사용하면 CSS가 폭을 100% 자동으로 채웁니다.이를 통해 높이에 대한 패딩 바텀을 가지고 장난을 시작하고 선택적으로 부모 컨테이너의 너비를 조정하여 원하는 가로 세로 비율을 만들 수 있습니다.
상위 요소는 상대 요소로 설정되어야 하며, 이미지는 전체 컨테이너를 포함하는 절대 요소여야 합니다.
가로 및 세로 이미지를 동일한 가로 세로 비율로 렌더링한 예는 다음과 같습니다.
.container{
padding-bottom: 40%;
position: relative;
width: 50%; //optional, use in combination with bottom padding as height
}
.container img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}<h1>Using portrait image</h1>
<div class="container">
<img src="https://images.pexels.com/photos/14339714/pexels-photo-14339714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Could be portrait or landscape"/>
</div>
<h1>Using landscape image</h1>
<div class="container">
<img src="https://images.pexels.com/photos/16208497/pexels-photo-16208497/free-photo-of-zee-natuur-wolken-kust.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Could be portrait or landscape"/>
</div>전체 화면에서 스니펫을 실행하는 것이 가장 좋습니다.
출처 : https://v1.tailwindcss.com/course/locking-images-to-a-fixed-aspect-ratio
이미지의 높이를 고정하고 폭을 제공하기만 하면 = auto
img{
height: 95vh;
width: auto;
}
언급URL : https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional
'programing' 카테고리의 다른 글
| SpringBoot 앱에서 Ubuntu 16.04의 MariaDB Galera 클러스터에 액세스 (0) | 2023.09.09 |
|---|---|
| 집계함수절차 (0) | 2023.09.09 |
| 텍스트 파일 MySQL 바인딩 및 식별자 만들기 (0) | 2023.09.09 |
| 안드로이드 알림음 재생 방법 (0) | 2023.09.09 |
| '사용자 'user'@'localhost'에 대한 액세스가 거부되었습니다. (0) | 2023.09.09 |