CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지
이미지로 작업 중이며 가로 세로 비율 관련 문제가 발생했습니다.
<img src="big_image.jpg" width="900" height="600" alt="" />
당신이 볼 수있는 것처럼 height하고 width이미 지정되어 있습니다. 이미지에 CSS 규칙을 추가했습니다.
img {
max-width:500px;
}
그러나 big_image.jpg, 나는 width=500과를 받는다 height=600. 가로 세로 비율을 유지하면서 이미지 크기를 조정하는 방법
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">이렇게하면 지정된 영역에 비해 너무 큰 경우 이미지가 축소됩니다 (단, 이미지가 확대되지 않음).
아래 솔루션을 사용 하면 부모 상자 너비에 따라 이미지를 확대 및 축소 할 수 있습니다.
모든 이미지에는 데모 용으로 고정 된 너비의 부모 컨테이너가 있습니다. 프로덕션에서 이것은 부모 상자의 너비가됩니다.
모범 사례 (2018) :
이 솔루션은 사용 가능한 최대 너비로 이미지를 렌더링하고 해당 너비의 백분율로 높이를 조정하도록 브라우저에 지시합니다.
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>더 환상적인 솔루션 :
더 멋진 솔루션을 사용하면 크기에 관계없이 이미지를 자르고 배경색을 추가하여 자르기를 보정 할 수 있습니다.
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>패딩을 지정하는 선의 경우 이미지의 종횡비를 계산해야합니다. 예를 들면 다음과 같습니다.
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
따라서 상단 패딩 = 34.37 %입니다.
나는이 문제로 어려움을 겪고 결국이 간단한 해결책에 도달했습니다.
object-fit: cover;
width: 100%;
height: 250px;
필요에 맞게 너비와 높이를 조정할 수 있으며 개체 맞춤 속성이 자르기를 수행합니다.
건배.
background-size 속성은 ie> = 9이지만 괜찮다면 div를 사용 background-image하고 설정할 수 있습니다 background-size: contain.
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
이제 원하는 크기로 div 크기를 설정할 수 있으며 이미지의 가로 세로 비율을 유지할뿐만 아니라 div 내에서 가로 및 세로로 중앙 집중화됩니다. div에는 태그 자체에 너비 / 높이 속성이 없으므로 CSS에서 크기를 설정하는 것을 잊지 마십시오.
이 접근법은 setecs 답변과 다릅니다.이를 사용하면 이미지 영역이 일정하고 사용자가 정의합니다 (div 크기 및 이미지 종횡비에 따라 가로 또는 세로로 빈 공간을 남겨 둡니다) .setecs 답변은 정확하게 크기가 조정 된 이미지의 크기 (공백 없음).
편집 : MDN 배경 크기 설명서 에 따르면 독점 필터 선언을 사용하여 IE8에서 배경 크기 속성을 시뮬레이션 할 수 있습니다.
Internet Explorer 8은 background-size 속성을 지원하지 않지만 비표준 -ms-filter 함수를 사용하여 일부 기능을 에뮬레이션 할 수 있습니다.
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
여기에 대한 답변과 매우 유사하지만 제 경우에는 때때로 키가 더 크고 때로는 더 큰 이미지가 있습니다.
이 스타일은 모든 이미지가 사용 가능한 모든 공간을 사용하고 비율을 유지하고 잘리지 않도록하는 매력처럼 작동했습니다.
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
"높이"속성을 제거하십시오.
<img src="big_image.jpg" width="900" alt=""/>
둘 다 지정하면 이미지의 종횡비가 변경됩니다. 하나만 설정하면 크기가 조정되지만 종횡비는 유지됩니다.
선택적으로 대형화를 제한하려면 다음을 수행하십시오.
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
CSS에 추가하면 원래 비율을 유지하면서 자동으로 축소되고 확장됩니다.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
이와 이미지의 가로 세로 비율을 유지하는 표준 방법은 없습니다 width, height그리고 max-width함께 지정했습니다.
따라서 이미지를로드하는 동안 페이지 "점프" 를 지정 width및 height방지하거나 max-width이미지의 크기 를 사용 및 지정하지 않아야합니다.
width(없이 height) 만 지정 하면 일반적으로 의미가 없지만 스타일 시트에 height규칙을 추가 하여 HTML 속성 을 재정의 할 수 있습니다 IMG {height: auto; }.
관련 Firefox 버그 392261 도 참조하십시오 .
이미지 컨테이너 태그의 CSS 클래스를 다음으로 설정하십시오 image-class.
<div class="image-full"></div>
CSS 스타일 시트에 추가하십시오.
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}
이미지를 특정 종횡비로 유지하면서 반응 형 이미지를 유지하려면 다음을 수행하십시오.
HTML :
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
그리고 SCSS :
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
작성자가 업로드하는 이미지의 크기에 관계없이 특정 종횡비를 적용하는 데 사용할 수 있습니다.
http://codepen.io/Kseso/pen/bfdhg의 @Kseso에게 감사드립니다 . 더 많은 비율과 실제 예제는이 URL을 확인하십시오.
이미지를 정확한 크기로 맞추려면 너무 많은 코드를 작성할 필요가 없습니다. 너무 간단합니다
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">https://jsfiddle.net/sot2qgj6/3/
당신이 이미지를 넣어하려는 경우 여기에 대답 폭의 고정 비율 ,하지만 하지 폭의 픽셀을 고정 .
그리고 이것은 다른 크기의 화면을 다룰 때 유용합니다 .
트릭은
padding-top너비에서 높이를 설정하는 데 사용 합니다.position: absolute패딩 공간에 이미지를 넣는 데 사용 합니다.max-height and max-width이미지가 부모 요소 위에 있지 않은지 확인하는 데 사용 합니다.display:block and margin: auto이미지를 중앙에 맞추기 위해 사용 합니다.
또한 바이올린 내부의 트릭 대부분을 언급했습니다.
나는 또한 이것을 가능하게하는 다른 방법을 찾습니다. html에는 실제 이미지가 없으므로 html에 "img"요소가 필요할 때 개인적으로 최고의 대답을 제시합니다.
백그라운드를 사용하여 간단한 CSS http://jsfiddle.net/4660s79h/2/
상단에 단어가있는 배경 이미지 http://jsfiddle.net/4660s79h/1/
위치 절대를 사용하는 개념은 여기에서 http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
다음과 같이 div를 만들 수 있습니다.
<div class="image" style="background-image:url('/to/your/image')"></div>
이 CSS를 사용하여 스타일을 지정하십시오.
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
이것을 사용할 수 있습니다 :
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
이렇게하면 지정된 영역에 비해 너무 큰 경우 이미지가 축소됩니다 (단, 이미지가 확대되지 않음).
setec의 솔루션은 자동 모드의 "Shrink to Fit"에 적합합니다. 그러나 '자동'모드에 맞게 최적으로 확장하려면 먼저 수신 된 이미지를 임시 ID에 넣어야합니다. 가로 또는 세로 비율에 따라 가로 또는 세로 비율에 따라 높이 또는 너비로 확장 할 수 있는지 확인하십시오. 디스플레이 블록),
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});
이 방법은 수신 된 이미지가 디스플레이 상자보다 작을 때 유용합니다. 크기와 대역폭을 절약하기 위해 더 큰 표시 상자를 채우려면 확장 버전이 아닌 원본 작은 크기로 서버에 저장해야합니다.
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">수직 정렬에 의사 요소를 사용하는 것은 어떻습니까? 이 적은 코드는 회전 목마 용이지만 모든 고정 크기 컨테이너에서 작동하는 것 같습니다. 가로 세로 비율을 유지하고 가장 짧은 치수로 위 / 아래 또는 왼쪽 / 쓰기에 @ 회색 막대를 삽입합니다. 한편, 이미지는 텍스트 정렬에 의해 수평으로 그리고 의사 요소에 의해 수직으로 중앙에 위치된다.
> li {
float: left;
overflow: hidden;
background-color: @gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
전체 화면 프레젠테이션 :
img[data-attribute] {height: 100vh;}
뷰포트 높이가 이미지보다 큰 경우 이미지는 차이에 비해 자연스럽게 저하됩니다.
참고 URL : https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio
'development' 카테고리의 다른 글
| HTML에서 단어 줄 바꿈을 해제하는 방법은 무엇입니까? (0) | 2020.02.13 |
|---|---|
| Eclipse에서 강조 표시 범위 지우기 (0) | 2020.02.13 |
| stdClass 유형의 객체를 배열로 사용할 수 없습니까? (0) | 2020.02.13 |
| 객체의 클래스를 결정하는 방법? (0) | 2020.02.13 |
| 텍스트 정렬 중심을 사용하는 중심 이미지? (0) | 2020.02.13 |