가로 세로 비율을 유지하면서 이미지 크기를 자동 조정하는 방법
너비:높이 비율을 유지하면서 큰 이미지의 크기를 자동 조정하여 작은 너비 div 용기에 넣으려면 어떻게 해야 합니까?
예: stackoverflow.com - 이미지를 에디터 패널에 삽입하고 이미지가 너무 커서 페이지에 맞지 않으면 이미지의 크기가 자동으로 조정됩니다.
이미지 태그에 명시적인 너비 또는 높이를 적용하지 마십시오.대신, 다음과 같이 하십시오.
max-width:100%;
max-height:100%;
ㅇㅇㅇㅇ.height: auto;너비만 지정하는 경우.
예: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>다른 방법이 있음이 판명되었습니다.
<img style='height: 100%; width: 100%; object-fit: contain'/>
아, 아, 네.에 꼭 도 꼭 넣어주세요.src ★★★★★★★★★★★★★★★★★」alt
바이올린: http://jsfiddle.net/mbHB4/7364/
현재 JPEG나 PNG 파일 등의 고정 크기 이미지에서는 이 작업을 정확하게 수행할 수 있는 방법이 없습니다.
이미지의 크기를 비례적으로 조정하려면 높이 또는 너비를 둘 다 아닌 "100%"로 설정해야 합니다.둘 다 100%로 설정하면 이미지가 늘어납니다.
높이 또는 너비를 선택할지 여부는 이미지 및 용기 치수에 따라 달라집니다.
- 이미지와 컨테이너가 모두 "세로 모양"이거나 "가로 모양"인 경우(각각 너비보다 높거나 너비보다 넓음) 높이와 너비 중 어느 것이 "%100"인지는 중요하지 않습니다.
- 가로일 , 가 if if if if를 설정해야 합니다.
height="100%"이미지에서. - , 가 if if if를 설정해야 합니다.
width="100%"이미지에서.
이미지가 가변 크기 벡터 이미지 형식인 SVG인 경우 컨테이너에 맞게 자동으로 확장할 수 있습니다.
에는 SVG에 되어 있는 이러한 .<svg> 삭제:
height
width
viewbox
대부분의 벡터 그리기 프로그램은 SVG 파일을 내보낼 때 이러한 속성을 설정하므로 내보낼 때마다 파일을 수동으로 편집하거나 스크립트를 작성해야 합니다.
제공된 이미지가 너무 작거나 너무 커서 div에 들어가지 않더라도 div 내에서 img를 수직 또는 수평으로 정렬할 수 있는 솔루션이 있습니다.
HTML 콘텐츠:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS 콘텐츠:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
jQuery 부분:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
이미지를 반응시키는 방법은 두 가지가 있습니다.
이미지가 배경 이미지인 경우.
#container{ width: 300px; height: 300px; background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } <div id="container"><div>여기서 실행
, '아예'를 사용해야 .
img를 붙이기 태그가?background-imageSEO에 관해서는 키워드를 입력할 수 있습니다.altimg태그입니다.여기서 이미지를 반응시킬 수 있습니다.가 「」에
img붙이다#container{ max-width: 400px; overflow: hidden; } img{ width: 100%; object-fit: contain; } <div id="container"> <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/> <div>여기서 실행
간단하게!
컨테이너를 고정합니다. height에 ,,에 img내부, 「」의 설정, 「」width ★★★★★★★★★★★★★★★★★」max-height.
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
점은 '하다, 하다, 하다'를 입니다.width%가 가 한다max-width.
이미지를 div의 배경으로 설정하고 CSS background-size 속성을 사용할 수 있습니다.
background-size: cover;
「배경 화상을 가능한 한 큰 사이즈로 조정해, 배경 영역이 배경 이미지로 완전하게 덮이도록 합니다. 배경 이미지의 일부가 배경 위치 설정 영역 내에 표시되지 않을 수 있습니다." - W3Schools
솔루션을 확인해 주세요.http://codepen.io/petethepig/pen/dvFsA
JavaScript 코드 없이 순수 CSS로 작성되어 있습니다.모든 크기와 방향의 이미지를 처리할 수 있습니다.
이러한 HTML을 지정하면:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS 코드는 다음과 같습니다.
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
이미지를 에 맞추는 방법은 여러 가지가 있습니다.<div>.
img {
object-fit: cover;
}
CSS 오브젝트 핏 속성은 CSS 오브젝트 핏의<img> ★★★★★★★★★★★★★★★★★」<video>컨테이너에 맞게 크기를 조정해야 합니다.
이 속성은 "애스펙트 비율 유지" 또는 "가능한 한 많은 공간을 차지"와 같은 다양한 방법으로 컨테이너를 채우는 내용을 알려줍니다.
- fill - 기본값입니다.지정된 치수에 맞게 이미지의 크기가 조정됩니다.필요에 따라 이미지가 늘어나거나 스퀴즈됩니다.
- contain - 이미지는 가로 세로 비율을 유지하지만 지정된 치수에 맞게 크기가 조정됩니다.
- 커버 - 이미지는 가로 세로 비율을 유지하며 지정된 치수를 채웁니다.이미지가 크기에 맞게 잘립니다.
- none - 이미지의 사이즈는 변경되지 않습니다.
- scale-down - 이미지가 none 또는 contains의 최소 버전으로 축소됩니다.
여기서 더 많은 작업 샘플을 찾을 수 있습니다.
JavaScript가 필요 없는 훨씬 더 나은 솔루션을 가지고 있습니다.반응성이 좋아서 많이 쓰고 있어요.종종 지정된 가로 세로 비율을 가진 용기 요소에 가로 세로 비율의 이미지를 맞추어야 합니다.그리고 이 모든 것이 완벽하게 반응하도록 하는 것은 필수입니다.
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>최대 너비 및 최대 높이를 독립적으로 설정할 수 있습니다. 이미지에는 최소 너비가 적용됩니다(이미지의 값 및 가로 세로 비율에 따라 다름).이미지를 원하는 대로 정렬하도록 설정할 수도 있습니다(예를 들어 무한 흰색 배경에 있는 제품 사진의 경우 이미지를 중앙 하단에 쉽게 배치할 수 있습니다).
이 솔루션은 이미지를 늘리지 않고 용기 전체를 채우지만 이미지를 일부 잘라냅니다.
HTML:
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
저는 jQuery 플러그인을 공개했습니다.이 플러그인은 다양한 옵션과 함께 필요한 기능을 제공합니다.
https://github.com/GestiXi/image-scale
사용방법:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
자바스크립트
$(function() {
$("img.scale").imageScale();
});
많은 분들이 오브젝트 핏을 추천하고 계시네요.하지만 오래된 브라우저에서도 작동하려면 다른 방법이 있습니다.
아주 간단해요.제가 취한 접근법은 이미지를 절대값으로 용기 내부에 배치한 후, 다음 조합을 사용하여 이미지를 바로 중앙에 배치하는 것이었습니다.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
일단 중앙에 오시면 이미지를 드리면
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
하면 가 '아주 좋다', '아주 좋다', '아주 좋다'의 수 .object-fit:cover.
위의 논리에 대한 시연은 다음과 같습니다.
https://jsfiddle.net/furqan_694/s3xLe1gp/
이 로직은 모든 브라우저에서 작동합니다.
다음 사항이 완벽하게 작동합니다.
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
다음 코드를 사용하여 이 문제를 해결했습니다.
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
}
.container img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
간단한 해결책은 Flexbox를 사용하는 것입니다.컨테이너의 CSS를 정의하여 다음을 수행합니다.
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/* Any custom height */
}
포함된 이미지 폭을 100%로 조정하면 치수가 보존된 상태에서 용기 안에 멋진 중앙 이미지를 얻을 수 있습니다.
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
여기에 답변한 바와 같이 다음과 같이 사용할 수도 있습니다.vh(유닛) units(유닛)max-height: 100%Crome (크롬) :
img {
max-height: 75vh;
}
하이퍼링크 내부의 이미지를 수평 및 수직 방향으로 중앙에 배치하고 비례적으로 크기를 조정했습니다.
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
Internet Explorer, Firefox 및 Safari에서 테스트되었습니다.
센터링에 대한 자세한 내용은 여기를 참조하십시오.
이미지에 필요한 높이와 폭을 <img> 태그가 있는 div에 지정합니다.적절한 스타일 태그로 높이/폭을 지정하는 것을 잊지 마세요.
에서 <img> 를 합니다.max-height ★★★★★★★★★★★★★★★★★」max-width100% 삭제
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
정보를 제대로 파악한 후 적절한 클래스에 세부 정보를 추가할 수 있습니다.
으로, 제가 입니다.storm.jpg.
이미지를 표시하는 단순한 페이지의 완전한 HTML 코드입니다.이것은 완벽하게 작동하며 www.resizemybrowser.com에서 테스트했습니다.CSS 코드를 HTML 코드 상단의 머리 부분 아래에 입력합니다.원하는 위치에 그림 코드를 넣으세요.
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
배치 장소의 높이를 브라우저에 통지해야 합니다.
.example {
height: 220px; /* DEFINE HEIGHT */
background: url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
편집: Internet Explorer 11에서 이전 테이블 기반 이미지 위치 지정에 문제가 발생하였습니다(max-height 않다display:table i ）과 Internet 모두에서 만 아니라 적게 Internet Explorer 7과 Internet Explorer 11 모두에서 정상적으로 동작할 뿐만 아니라 코드도 적게 필요한 인라인 기반 포지셔닝으로 대체했습니다.
그 주제에 대한 나의 견해는 이렇다.크기가 있을 max-width ★★★★★★★★★★★★★★★★★」max-height사이즈가 않는 것 할 수 ).picture-frame 및 " " " 。px125클래스 크기를 기존 컨테이너에 맞춥니다).
CSS의 경우:
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
HTML:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
데모
/* Main style */
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px32
{
width: 32px;
height: 32px;
line-height: 32px;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
/* Extras */
.picture-frame
{
padding: 5px;
}
.frame
{
border:1px solid black;
}<p>32px</p>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>편집: JavaScript(이미지 업스케일링)를 사용하여 추가 개선 가능:
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
이미지가 너무 작으면 Thorn007에서 받아들여진 답변이 작동하지 않습니다.
이를 해결하기 위해 스케일 팩터를 추가했습니다.이렇게 하면 이미지가 커지고 div 용기를 채울 수 있습니다.
예:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
주의:
- WebKit를 .
-webkit-transform:scale(4); -webkit-transform-origin:left top;★★★★★★★★★★★★★★★★★★. - 스케일 팩터가 4인 경우 최대 폭 = 400/4 = 100이고 최대 높이 = 200/4 = 50입니다.
- 또 다른 솔루션은 최대 폭과 최대 높이를 25%로 설정하는 것입니다.더 간단해.
심플한 솔루션(4단계 수정!!)아래는 저에게 효과가 있는 것 같습니다.예제에서는 너비를 사용하여 전체 크기를 결정하지만, 뒤집어서 높이를 대신 사용할 수도 있습니다.
- 이미지 컨테이너에 CSS 스타일링을 적용합니다(예: <img>).
- 너비 속성을 원하는 차원으로 설정합니다.
- 에 대해서는, 「 」를 합니다.
%상대 크기 또는 자동 스케일링(이미지 용기 또는 디스플레이에 기반) px경우 ( dimension ('기타')의 경우
- 에 대해서는, 「 」를 합니다.
- 너비에 따라 자동으로 조정할 높이 속성 설정
- 즐기세요!
예를들면,
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
제시된 모든 답변(허용된 답변 포함)은 다음과 같은 전제하에서만 작동합니다.divwrapper는 고정 크기입니다.이 방법은 어떤 크기든div과 같이 페이지를 합니다.
셀렉터 내부에 다음 선언을 작성합니다.
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
다음으로 셀렉터 안에 다음 선언을 넣습니다.
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
매우 중요:
「」의 값maxHeight는 및 실렉터에서 모두 같아야 합니다.
은 '이렇게'를 사용하는 입니다.object-fit:
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height: 100%;
width: 100%;
object-fit: cover;
}
는, 「」를 .img-responsive change to 클 class클클로
.container img{
object-fit: cover;
}
「」를 추가하는 .img-responsive의 클래스img 삭제:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
2014년 Codepen의 예에서 보듯이, 나는 가능한 한 적은 Javascript의 도움으로 폭/높이(aspect-ratio)의 알려지지 않은 조합에 대해 작동하는 솔루션을 만들었고, 용기의 애스펙트 비율이 이미지의 애스펙트 비율을 상/하로 변경했을 때 이미지의 중심이 어떻게 되는지에 대한 CSS를 변경했습니다.
오른쪽 아래 모서리를 끌어 컨테이너 크기를 조정해 보십시오.
// Detects when the window width is too narrow for the current image
// aspect-ratio, and fits it to height 100% instead of width 100%.
const photo = document.images[0]
const onPhotoResize = new ResizeObserver(entries =>
window.requestAnimationFrame(checkRatio)
)
onPhotoResize.observe(photo.parentNode)
function checkRatio(){
const photoParent = photo.parentNode,
imageAspectRatio = photo.clientWidth / photo.clientHeight,
parentAspectRatio = photoParent.clientWidth / photoParent.clientHeight
photo.classList[imageAspectRatio > parentAspectRatio ? 'add':'remove']('max')
}.box{
width: 20%;
height: 60%;
margin: auto;
position: absolute;
top:0; left:0; right:0; bottom:0;
resize: both;
overflow: hidden;
border: 5px solid red;
}
.box > img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.box > img.max{ width:auto; height:100%; }<div class='box'>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg">
</div>수학만 조금 하면 쉽게 풀 수 있어요
이미지를 div에 넣은 후 이미지를 지정한HTML 파일에 넣기만 하면 됩니다.이미지의 픽셀 값을 사용하여 폭과 높이 값을 백분율로 설정하여 폭 대 높이의 정확한 비율을 계산합니다.
예를 들어, 폭 200픽셀, 높이 160픽셀의 이미지가 있다고 가정합니다.너비 값은 큰 값이기 때문에 100%라고 해도 무방합니다.그런 다음 높이 값을 계산하려면 높이를 80%의 백분율 값을 제공하는 너비로 나누면 됩니다.코드에서 보면 이렇게...
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>
언급URL : https://stackoverflow.com/questions/3029422/how-to-auto-resize-an-image-while-maintaining-aspect-ratio
'programing' 카테고리의 다른 글
| 공백이 있는 파일 목록에서 반복 (0) | 2023.04.08 |
|---|---|
| "Windows Defender SmartScreen으로 인해 인식할 수 없는 앱이 시작되지 않았습니다"를 방지하는 방법 (0) | 2023.04.08 |
| Bash에서 관련 어레이를 통해 반복하는 방법 (0) | 2023.04.08 |
| Bash 조건: 표현식 "및" 방법은?([! -z $VAR & -e $VAR ]의 경우) (0) | 2023.04.08 |
| 파라미터의 큰따옴표 이스케이프 (0) | 2023.04.08 |