CSS Hiển thị một hình ảnh được thay đổi kích thước và cắt

Tôi muốn hiển thị hình ảnh từ một URL có chiều rộng và chiều cao nhất định ngay cả khi nó có tỷ lệ kích thước khác nhau. Vì vậy, tôi muốn thay đổi kích thước (duy trì tỷ lệ) và sau đó cắt hình ảnh theo kích thước tôi muốn.

Tôi có thể thay đổi kích thước với thuộc tính html imgvà tôi có thể cắt bằng background-image.
Làm thế nào tôi có thể làm cả hai?

Thí dụ:

Bức ảnh này:

Có kích thước 800x600pixel và tôi muốn hiển thị như hình ảnh của 200x100pixel

Với imgtôi có thể thay đổi kích thước hình ảnh 200x150px:

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

Điều đó cho tôi điều này:

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

Và với background-imagetôi có thể cắt các 200x100pixel hình ảnh.

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

Đưa cho tôi:

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

Làm thế nào tôi có thể làm cả hai?
Thay đổi kích thước hình ảnh và sau đó cắt nó theo kích thước tôi muốn?

Bạn có thể sử dụng kết hợp cả hai phương pháp, vd.

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

Bạn có thể sử dụng tiêu cực marginđể di chuyển hình ảnh xung quanh trong <div/>.

Với CSS3 nó có thể thay đổi kích thước của một background-imagevới background-size, thực hiện cả hai mục tiêu cùng một lúc.

Có một loạt các ví dụ trên css3.info .

Được triển khai dựa trên ví dụ của bạn , sử dụng donald_duck_4.jpg . Trong trường hợp này, background-size: cover;chỉ là những gì bạn muốn - nó phù hợp background-imageđể bao phủ toàn bộ khu vực chứa <div>và cắt bớt phần thừa (tùy thuộc vào tỷ lệ).

.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 hình nền kích thước nền

Bạn đã thử sử dụng cái này?

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

Tôi cần phải thay đổi kích thước hình ảnh, trung tâm (cả theo chiều dọc và chiều ngang) và hơn là cắt nó.

Tôi rất vui khi thấy rằng nó có thể được thực hiện trong một dòng css duy nhất. Kiểm tra ví dụ ở đây: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

Đây là CSSvà HTMLmã từ ví dụ đó:

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

Các div chứa với chủ yếu cắt ảnh bằng cách ẩn tràn.

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

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

Cảm ơn sanchothefat.

Tôi có một cải tiến cho câu trả lời của bạn. Vì crop rất phù hợp với mọi hình ảnh, định nghĩa này phải có ở HTML thay vì CSS.

<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-fitcó thể giúp bạn, nếu bạn đang chơi với <img>thẻ

Các mã dưới đây sẽ cắt hình ảnh của bạn cho bạn. Bạn có thể chơi xung quanh với đối tượng phù hợp

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

Ví dụ trực tiếp: 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);
      }

Giải thích: Ở đây hình ảnh được thay đổi kích thước theo giá trị chiều rộng và chiều cao của hình ảnh. Và crop được thực hiện bởi tài sản clip.

Để biết chi tiết về tài sản clip, hãy theo dõi: http://tympanus.net/codrops/2013/01/16/under Hiểu-the-css- clip- project /

Trong lớp crop, đặt kích thước hình ảnh mà bạn muốn xuất hiện:

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

Html sẽ trông như sau:

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

Bạn có thể đặt thẻ img trong thẻ div và thực hiện cả hai, nhưng tôi khuyên bạn nên chống lại tỷ lệ hình ảnh trong trình duyệt. Nó thực hiện một công việc tệ hại hầu hết thời gian bởi vì các trình duyệt có thuật toán mở rộng rất đơn giản. Tốt hơn là thực hiện mở rộng quy mô của bạn trong Photoshop hoặc ImageMagick trước, sau đó phục vụ nó cho khách hàng tốt và đẹp.

Những gì tôi đã làm là tạo một kịch bản phía máy chủ sẽ thay đổi kích thước và cắt ảnh trên đầu máy chủ để nó sẽ gửi ít dữ liệu hơn trên mạng.

Nó khá tầm thường, nhưng nếu có ai quan tâm, tôi có thể đào và đăng mã (asp.net)

Có những dịch vụ như Filestack sẽ làm điều này cho bạn.

Họ lấy url hình ảnh của bạn và cho phép bạn thay đổi kích thước bằng các tham số url. Nó là khá dễ dàng.

Hình ảnh của bạn sẽ trông như thế này sau khi thay đổi kích thước thành 200x100 nhưng vẫn giữ tỷ lệ khung hình

Toàn bộ url trông như thế này

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

nhưng phần quan trọng chỉ là

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

Hãy thử sử dụng clip-pathtài sản:

Thuộc tính đường dẫn clip cho phép bạn cắt một phần tử thành hình cơ bản hoặc nguồn SVG.

Lưu ý: Thuộc tính clip-path sẽ thay thế thuộc tính clip không dùng nữa.

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

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

Thêm ví dụ ở đây .

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

Nếu bạn đang sử dụng Bootstrap, hãy thử sử dụng { background-size: cover; }vì <div>có thể cung cấp cho div một lớp <div class="example" style=url('../your_image.jpeg');>để nó trở thành div.example{ background-size: cover}

Tôi cần phải làm điều này gần đây. Tôi muốn tạo một liên kết hình thu nhỏ đến biểu đồ NOAA. Vì biểu đồ của họ có thể thay đổi bất cứ lúc nào, tôi muốn hình thu nhỏ của mình thay đổi theo nó. Nhưng có một vấn đề với biểu đồ của họ: nó có một đường viền trắng lớn ở trên cùng, vì vậy nếu bạn chỉ thu nhỏ nó để làm cho hình thu nhỏ bạn kết thúc với khoảng trắng bên ngoài trong tài liệu.

Đây là cách tôi giải quyết nó:

http://sealevel.info/example_css_scale_and_crop.html

Đầu tiên tôi cần làm một chút về số học. Hình ảnh gốc từ NOAA là 960 × 720 pixel, nhưng bảy mươi pixel trên cùng là một vùng viền trắng không cần thiết. Tôi cần một hình thu nhỏ 349 × 172, không có khu vực viền phụ ở trên cùng. Điều đó có nghĩa là phần mong muốn của ảnh gốc cao 720 - 70 = 650 pixel. Tôi cần phải thu nhỏ tỷ lệ đó xuống còn 172 pixel, tức là, 172/650 = 26,5%. Điều đó có nghĩa là 26,5% của 70 = 19 hàng pixel cần phải được xóa khỏi đỉnh của hình ảnh được chia tỷ lệ.

Vì thế…

1. Đặt chiều cao = 172 + 19 = 191 pixel:

   chiều cao = 191

2. Đặt lề dưới thành -19 pixel (rút ngắn hình ảnh thành cao 172 pixel):

   lề dưới: -19px

3. Đặt vị trí trên cùng thành -19 pixel (dịch chuyển hình ảnh lên, sao cho 19 hàng pixel trên cùng bị tràn & bị ẩn thay vì ở dưới cùng):

   đầu trang: -19px

HTML kết quả trông như thế này:

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

Như bạn có thể thấy, tôi đã chọn định kiểu thẻ chứa <a>, nhưng thay vào đó, bạn có thể tạo kiểu <div>.

Một yếu tố của phương pháp này là nếu bạn hiển thị các đường viền, đường viền trên cùng sẽ bị thiếu. Vì tôi sử dụng Border = 0 dù sao đi nữa, đó không phải là vấn đề đối với tôi.

Bạn có thể sử dụng Dịch vụ thay đổi kích thước hình ảnh của Kodem . Bạn có thể thay đổi kích thước bất kỳ hình ảnh chỉ bằng một cuộc gọi http. Có thể được sử dụng tình cờ trong trình duyệt hoặc được sử dụng trong ứng dụng sản xuất của bạn.

• Tải lên hình ảnh ở đâu đó bạn thích (S3, imgur, v.v.)
• Cắm nó vào url API chuyên dụng của bạn (từ bảng điều khiển của chúng tôi)