CSS만 사용하여 이미지 크기를 조정하고 자르려면 어떻게 해야 합니까?

CSS를 사용하여 이미지 크기 조정 및 자르기

이 기사에서는 CSS를 사용하여 이미지 크기를 조정하고 자르는 방법을 살펴보겠습니다. 이 기술을 사용하면 원본 이미지의 가로 세로 비율이 다른 경우에도 특정 너비와 높이로 이미지를 표시할 수 있습니다.

이미지 크기 조정 및 자르기

이미지 크기를 조정하고 자르려면, img 및 background-image 속성을 조합하여 사용할 수 있습니다. img 속성을 사용하면 가로 세로 비율을 유지하면서 이미지 크기를 조정할 수 있습니다. background-image 속성을 사용하면 이미지를 원하는 크기로 자를 수 있습니다.

예

다음 예를 고려하세요.

이 이미지의 크기는 800x600픽셀입니다. 200x100 픽셀의 이미지로 표시하고 싶습니다.

1단계: 이미지 크기 조정

<br><img</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">style="width: 200px; height: 150px;" 
src="https://i.sstatic.net/wPh0S.jpg"></p>
<p>

이것은 단계에서는 가로 세로 비율을 유지하면서 이미지 크기를 200x150픽셀로 조정합니다.

2단계: 이미지 자르기

<br><div</p><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div></p>
<p> </p>
<p>이 단계에서는 크기가 조정된 이미지를 자릅니다. </p>
<h3>결합된 접근 방식</h3>
<p>이 두 기술을 결합하여 원하는 결과를 얻을 수 있습니다. 예를 들어 다음 코드는 다음과 같습니다.</p>
<p><pre class="brush:php;toolbar:false"></p>
<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>