CSS는 크기 조정 및 자르기 이미지를 표시합니다

Question

크기 비율이 다른 경우에도 특정 너비와 높이의 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>

둘 다 어떻게 할 수 있습니까?
이미지를 조정 한 다음 원하는 크기를 자릅니다.

Answer 1

두 가지 방법의 조합을 사용할 수 있습니다.

    .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/>.

Answer 2

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 배경 이미지 배경 크기

Answer 3

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

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

Answer 4

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

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

오버플로를 숨겨 이미지를 본질적으로 자르는 DIV.

Answer 5

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

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

Answer 6

감사합니다 Sanchothefat.

나는 당신의 대답을 개선했습니다. 작물은 모든 이미지에 맞게 매우 맞춤형 이므로이 정의는 CSS 대신 HTML에 있어야합니다.

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

Answer 7

object-fit 함께 놀면 도와 줄 수 있습니다 <img> 꼬리표

아래 코드는 귀하를 위해 이미지를 자릅니다. 당신은 함께 놀 수 있습니다 객체 적합

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

Answer 8

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

Answer 9

작물 클래스에서 표시하려는 이미지 크기를 배치하십시오.

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

Answer 10

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

Answer 11

라이브 예 : 예 :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/

Answer 12

IMG 태그를 DIV 태그에 넣고 둘 다 수행 할 수 있지만 브라우저에서 이미지 스케일링에 대해 권장합니다. 브라우저는 매우 단순한 스케일링 알고리즘을 가지고 있기 때문에 대부분의 시간이 지정된 작업을 수행합니다. 먼저 Photoshop 또는 Imagemagick에서 스케일링을하는 것이 좋습니다. 그런 다음 고객에게 멋진 고객에게 제공하십시오.

Answer 13

내가 한 일은 서버 끝에서 사진을 크기를 조정하고 자르는 서버 측 스크립트를 작성하여 인터 웹에서 데이터를 적게 보내도록하는 것입니다.

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

Answer 14

거기 있습니다 서비스 당신을 위해 이것을 할 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]

Answer 15

<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*/
}

Answer 16

부트 스트랩을 사용하는 경우 사용해보십시오 { background-size: cover; } 용 <div> 어쩌면 Div에게 클래스의 말을 할 수도 있습니다 <div class="example" style=url('../your_image.jpeg');> 그래서 그것은됩니다div.example{ background-size: cover}

Answer 17

나는 최근에 이것을해야했다. 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>

보시다시피, 나는 포함 된 u003Ca>태그를 스타일로 만들기로 선택했지만 스타일을 만들 수 있습니다.u003C/a>u003Cdiv> u003Ca>, 대신에.u003C/a>

이 접근법의 한 가지 인공물은 국경을 보여 주면 상단 테두리가 누락된다는 것입니다. 어쨌든 Border = 0을 사용하기 때문에 그것은 나에게 문제가되지 않았습니다.