programing

CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

batch 2023. 5. 31. 18:31

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">

지정된 영역에 비해 너무 크면 이미지가 축소됩니다(하향적으로 이미지가 확대되지 않음).

해결책은 다음과 같습니다.

object-fit: cover;
width: 100%;
height: 250px;

필요에 따라 너비와 높이를 조정할 수 있으며 객체 맞춤 속성이 자르기를 대신합니다.

값대정의 에 대한 object-fit속성 및 호환성 표는 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit 에서 사용할 수 있습니다.

아래 솔루션을 사용하면 상위 상자 너비에 따라 이미지의 크기를 조정하거나 축소할 수 있습니다.

모든 이미지에는 데모용으로만 고정된 너비의 상위 컨테이너가 있습니다.프로덕션에서는 상위 상자의 너비가 됩니다.

모범 사례(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://place-hold.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://place-hold.it/640x220">
  </div>
</div>

패딩을 지정하는 선의 경우 다음과 같이 영상의 가로 세로 비율을 계산해야 합니다.

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

따라서 상단 패딩 = 34.37%입니다.

여기에 있는 몇몇 대답들과 매우 유사하지만, 제 경우에는 어떤 때는 더 크고, 어떤 때는 더 큰 이미지를 가지고 있었습니다.

이 스타일은 모든 이미지가 사용 가능한 공간을 모두 사용하고 비율을 유지하며 절단하지 않도록 하는 매력적인 방식으로 작동했습니다.

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

배경 크기 속성은 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은 백그라운드 크기 속성을 지원하지 않지만 비표준 -ms-filter 함수를 사용하여 일부 기능을 에뮬레이트할 수 있습니다.

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

높이 속성을 제거합니다.

<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;"/>

Firefox 71+(2019-12-03) 및 Chrome 79+(2019-12-10)는 의 내부 매핑을 지원합니다.width그리고.height 성의 IMG새 CSS 속성의 요소입니다.

계산된 가로 세로 비율은 로드될 때까지 영상에 대한 공간을 예약하는 데 사용되며, 계산된 가로 세로 비율이 영상의 실제 가로 세로 비율과 동일한 한 영상 로드 후 페이지 "점프"가 방지됩니다.

이 기능이 작동하려면 두 개의 이미지 치수 중 하나를 CSS를 통해 오버라이드해야 합니다.auto설정:

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

로드되지 에도 16:9:720)의 세로 됩니다.max-width: 100%.

관련 Firefox 버그 392261도 참조하십시오.

솔루션은 다음과 같습니다.

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

이렇게 하면 이미지가 항상 전체 상위를 덮고(축소 및 축소) 동일한 가로 세로 비율을 유지할 수 있습니다.

이것을 당신의 css에 추가하기만 하면, 그것은 원래 비율을 유지하면서 자동으로 축소되고 확장될 것입니다.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

이건 정신적인 문제야축소 속성을 사용합니다. 이 속성은 자체적으로 설명합니다.

인라인 스타일:

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

이렇게 하면 신축성이 늘어나지 않습니다.이 경우 이미지는 상위 컨테이너 너비의 50%로 이동하고 높이는 그에 맞게 축소됩니다.

단순하게 받아들여라.

교체만 하면 됩니다.`height`에 의한 `aspect-ratio`기여하다.

img {
  max-width: 500px;
  aspect-ratio: 900 / 600;
}

<img src="big_image.png" width="900"/>

그aspect-ratio속성은 필요하지 않지만 이미지 레이아웃 이동을 방지합니다.

응답 이미지를 유지하면서 이미지에 특정 가로 세로 비율을 적용하려면 다음 작업을 수행합니다.

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 의 @Kseoso에게 감사드립니다.자세한 비율과 작업 예제는 이 URL에서 확인하십시오.

이미지 컨테이너 태그의 CSS 클래스를 다음으로 설정합니다.image-class:

<div class="image-full"></div>

그리고 이것을 당신의 CSS 스타일시트에 추가합니다.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

대응적 접근 방식의 경우 다음과 같이 Viewport 단위와 최소/최대 특성을 사용하는 것이 가장 좋습니다.

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

정확한 크기에 맞는 이미지를 강제로 만들기 위해 너무 많은 코드를 작성할 필요가 없습니다.참 쉽다.

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

다음을 사용할 수 있습니다.

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

다음과 같은 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

컨테이너를 다음으로 설정할 수 있습니다.display: flex그리고.align-items: center(기타align-items값도 작동합니다.대신에align-items설정할 수도 있습니다.align-self이미지 자체에.

사용할 수 있습니다.aspect-ratio속성 css

.my-image {
 aspect-ratio: 1/1; // square
 aspect-ratio: 16/9; // wide screen 1080p
 aspect-ratio: 4/3;
 aspect-ratio: 2/3;
}

지정된 영역에 비해 너무 크면 이미지가 축소됩니다(하향적으로 이미지가 확대되지 않음).

auto 모드에서 "Shrink to Fit"은 setec별 솔루션이면 됩니다.그러나 '자동' 모드에 맞게 최적으로 확장하려면 먼저 수신된 이미지를 중간에 놓고 높이 또는 너비로 확장할 수 있는지 확인합니다(디스플레이 블록의 가로 세로 비율 v/s에 따라 다름).

$(".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");
});

이 방법은 수신된 이미지가 디스플레이 상자보다 작을 때 유용합니다.크기와 대역폭을 절약하려면 확장된 버전이 아닌 원래 크기로 서버에 저장해야 합니다.

사용할 수 있습니다.

transform: scaleX(1.2);

높이를 변경하지 않고 너비를 변경합니다.

그리고.

transform: scaleY(1.2);

너비를 변경하지 않고 높이를 변경하는 것

HTML과 CSS의 이미지와 비디오 태그에 사용할 수 있습니다.이것은 또한 가로 세로 비율을 바꾸지 않습니다.

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;}

뷰 포트 높이가 이미지보다 크면 이미지가 차이에 따라 자연스럽게 저하됩니다.

응용프로그램에 가로 세로 비율 또는 해상도의 이미지가 있을 수 있는 경우 이 링크에서와 같이 높이 및 너비를 관리할 수 있습니다.

이것은 자바스크립트와 HTML을 사용합니다.

https://stackoverflow.com/a/65090175/13338731

언급URL : https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio

'programing' 카테고리의 다른 글

루비에서 두 Date 개체 사이의 일 수를 어떻게 찾을 수 있습니까? (0)	2023.05.31
인스턴스화 시 VB.NET Dictionary에 값을 삽입하는 방법은 무엇입니까? (0)	2023.05.31
날짜 시간.지금 대 날짜 시간.UtcNow (0)	2023.05.31
활동에 연결되지 않은 조각 MyFragment (0)	2023.05.31
OSX의 홈브루에서 "cannot load the file --utils/open"을 방지하는 방법 (0)	2023.05.31

현재글CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

각종 프로그래밍 정보를 다루는 블로그입니다.

mariadb, ReactJS, bash, Wordpress, Git, Python, spring-boot, jquery, mongoDB, ASP.NET, C, PowerShell, Excel, json, android, ajax, typescript, angularjs, SQL-Server, Oracle,

Today :
Yesterday :

batch

CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

모범 사례(2018):

고급 솔루션:

교체만 하면 됩니다.`height`에 의한 `aspect-ratio`기여하다.

사용할 수 있습니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

CSS 강제 이미지 크기 조정 및 가로 세로 비율 유지

모범 사례(2018):

고급 솔루션:

교체만 하면 됩니다.height에 의한 aspect-ratio기여하다.

사용할 수 있습니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

교체만 하면 됩니다.`height`에 의한 `aspect-ratio`기여하다.