CSS 이미지 크기 조정 및 자른 표시

크기 비율이 다른 경우에도 특정 너비와 높이의 URL에서 이미지를 표시하고 싶습니다. 그래서 (크기를 유지하면서) 크기를 조정하고 원하는 크기로 이미지를 자르고 싶습니다.

html img속성으로 크기를 조정할 수 있고로 잘라낼 수 있습니다 background-image.
둘 다 어떻게합니까?

예:

이 사진:

크기 800x600픽셀이 있고 200x100픽셀 이미지처럼 보이고 싶습니다.

로 img나는 이미지의 크기를 조정할 수 있습니다 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

그것은 나에게 이것을 준다 :

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

그리고으로 background-image나는 이미지 줄일 수 200x100픽셀.

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

나에게 준다 :

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

둘 다 어떻게합니까?
이미지 크기를 조정 한 다음 원하는 크기로 잘라내시겠습니까?

예를 들어 두 방법을 조합하여 사용할 수 있습니다.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

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

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

음수 margin를 사용 하여 이미지 내에서 이미지를 이동할 수 있습니다 <div/>.

CSS3와 함께 그것은의 크기를 변경하는 것이 가능 background-image와를 background-size한 번에 모두 목표를 성취.

있다 예 무리 에 css3.info은 .

donald_duck_4.jpg를 사용 하여 예제를 기반으로 구현 했습니다 . 이 경우 background-size: cover;원하는 것입니다- background-image포함의 전체 영역을 덮고 <div>초과 비율 (비율에 따라 다름)에 맞습니다 .

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

CSS3 배경 이미지 배경 크기

이것을 사용하려고 했습니까?

.centered-and-cropped { object-fit: cover }

이미지의 크기를 조정하고 (세로와 가로로) 이미지를 자르는 것보다 필요했습니다.

나는 그것이 하나의 CSS 라인에서 이루어질 수 있다는 것을 알게되어 기뻤습니다. 예를 확인하십시오 : http://codepen.io/chrisnager/pen/azWWgr/?editors=110

이 예제의 코드 는 다음 CSS과 같습니다 HTML.

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

포함하는 div는 본질적으로 오버플로를 숨겨서 이미지를 자릅니다.

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

sanchothefat 감사합니다.

귀하의 답변이 개선되었습니다. 자르기는 모든 이미지에 맞게 조정되므로이 정의는 CSS 대신 HTML에 있어야합니다.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

object-fit<img>태그를 사용 하는 경우 도움이 될 수 있습니다.

아래 코드는 이미지를 자릅니다. 당신은 개체 맞춤으로 놀 수 있습니다

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

라이브 예 : https://jsfiddle.net/de4Lt57z/

HTML :

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS :

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

설명 : 여기서 이미지는 이미지의 너비와 높이 값에 따라 크기가 조정됩니다. 자르기는 클립 속성으로 수행됩니다.

클립 속성에 대한 자세한 내용은 다음을 참조하십시오 : http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

자르기 클래스에서 표시 할 이미지 크기를 배치하십시오.

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

HTML은 다음과 같습니다

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

img 태그를 div 태그에 넣고 둘 다 할 수 있지만 브라우저에서 이미지 크기를 조정하지 않는 것이 좋습니다. 브라우저는 매우 간단한 스케일링 알고리즘을 가지고 있기 때문에 대부분의 작업을 크게 수행합니다. Photoshop 또는 ImageMagick에서 먼저 스케일링을 수행 한 다음 클라이언트에게 멋지게 제공하십시오.

내가 한 것은 서버 측에서 그림의 크기를 조정하고 자르는 서버 측 스크립트를 작성하여 인터 웹을 통해 더 적은 데이터를 전송하는 것입니다.

상당히 사소하지만 누군가 관심이 있다면 코드를 파고 게시 할 수 있습니다 (asp.net)

있습니다 서비스 당신을 위해 이것을 할 것 Filestack 등.

그들은 당신의 이미지 URL을 가지고 URL 매개 변수를 사용하여 크기를 조정할 수 있습니다. 꽤 쉽습니다.

200x100으로 크기를 조정했지만 가로 세로 비율을 유지 한 후 이미지는 다음과 같습니다.

전체 URL은 다음과 같습니다

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

중요한 부분은

resize=width:200/crop=d:[0,25,200,100]

clip-path속성을 사용해보십시오 :

clip-path 속성을 사용하면 요소를 기본 모양 또는 SVG 소스로자를 수 있습니다.

참고 : clip-path 속성은 더 이상 사용되지 않는 클립 속성을 대체합니다.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

더 많은 예제는 여기에 있습니다 .

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

부트 스트랩을 사용 { background-size: cover; }하는 <div>경우 div에 클래스를 지정 <div class="example" style=url('../your_image.jpeg');>하여 사용하십시오. div.example{ background-size: cover}

나는 이것을 최근에해야했다. NOAA 그래프에 썸네일 링크를 만들고 싶습니다. 그들의 그래프는 언제든지 바뀔 수 있기 때문에 썸네일이 그와 함께 바뀌기를 원했습니다. 그러나 그래프에는 문제가 있습니다. 맨 위에 큰 흰색 테두리가 있으므로 축소판을 만들기 위해 크기를 조정하면 문서에 불필요한 공백이 생깁니다.

내가 해결 한 방법은 다음과 같습니다.

http://sealevel.info/example_css_scale_and_crop.html

먼저 약간의 산술이 필요했습니다. NOAA의 원본 이미지는 960 × 720 픽셀이지만 상위 70 픽셀은 불필요한 흰색 테두리 영역입니다. 상단에 여분의 테두리 영역이없는 348 × 172 썸네일이 필요했습니다. 이는 원본 이미지에서 원하는 부분의 높이가 720-70 = 650 픽셀임을 의미합니다. 나는 그것을 172 픽셀, 즉 172/650 = 26.5 %로 축소해야했습니다. 즉, 스케일 이미지의 상단에서 70 = 19 행의 26.5 %의 픽셀을 삭제해야했습니다.

그래서…

1. 높이 = 172 + 19 = 191 픽셀을 설정하십시오.

   신장 = 191

2. 아래쪽 여백을 -19 픽셀로 설정하십시오 (이미지를 높이 172 픽셀로 줄임).

   여백-바닥 : -19px

3. 상단 위치를 -19 픽셀로 설정합니다 (이미지를 위로 이동하여 상단 19 픽셀 행이 오버플로 및 하단 대신 숨겨 지도록).

   상단 : -19px

결과 HTML은 다음과 같습니다.

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

보시다시피 포함 <a> 태그의 스타일을 선택했지만 대신 <div>의 스타일을 지정할 수 있습니다.

이 방법의 한 가지 아티팩트는 테두리를 표시하면 위쪽 테두리가 누락된다는 것입니다. 어쨌든 border = 0을 사용하기 때문에 문제가되지 않았습니다.

Kodem의 이미지 크기 조정 서비스를 사용할 수 있습니다 . http 호출만으로 모든 이미지의 크기를 조정할 수 있습니다. 브라우저에서 자연스럽게 사용하거나 프로덕션 앱에서 사용할 수 있습니다.

• 원하는 곳에 이미지를 업로드하십시오 (S3, 이미지 등).
• 대시 보드에서 전용 API URL에 연결하십시오.