Tôi đang làm việc với hình ảnh, và tôi đã gặp một vấn đề với tỷ lệ khung hình.

<img src="big_image.jpg" width="900" height="600" alt="" />

Như bạn có thể thấy, heightvà widthđã được chỉ định. Tôi đã thêm quy tắc CSS cho hình ảnh:

img {
  max-width:500px;
}

Nhưng cho big_image.jpg, tôi nhận được width=500và height=600. Làm cách nào tôi có thể đặt hình ảnh ở kích thước lại, trong khi vẫn giữ tỷ lệ khung hình của chúng.

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

Điều này sẽ làm thu nhỏ hình ảnh nếu nó quá lớn đối với khu vực được chỉ định (vì nhược điểm, nó sẽ không phóng to hình ảnh).

Tôi đã đấu tranh với vấn đề này khá khó khăn, và cuối cùng đã đi đến giải pháp đơn giản này:

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

Bạn có thể điều chỉnh chiều rộng và chiều cao để phù hợp với nhu cầu của mình và thuộc tính phù hợp với đối tượng sẽ thực hiện việc cắt xén cho bạn.

Chúc mừng.

Các giải pháp dưới đây sẽ cho phép thu nhỏ và thu nhỏ hình ảnh , tùy thuộc vào chiều rộng của hộp cha.

Tất cả các hình ảnh có một thùng chứa cha mẹ với chiều rộng cố định chỉ cho mục đích trình diễn . Trong sản xuất, đây sẽ là chiều rộng của hộp cha.

Thực hành tốt nhất (2018):

Giải pháp này yêu cầu trình duyệt hiển thị hình ảnh với chiều rộng tối đa có sẵn và điều chỉnh chiều cao theo tỷ lệ phần trăm của chiều rộng đó.

.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://placehold.it/400x400">
</div>

Giải pháp Fancier:

Với giải pháp fancier, bạn sẽ có thể cắt hình ảnh bất kể kích thước của nó và thêm màu nền để bù cho việc cắt xén.

.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://placehold.it/640x220">
  </div>
</div>

Đối với phần đệm chỉ định dòng, bạn cần tính tỷ lệ khung hình của hình ảnh, ví dụ:

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

640/220 = 2.909
100/2.909 = 34.37%

Vì vậy, đệm hàng đầu = 34,37%.

Thuộc tính kích thước nền chỉ có nghĩa là> = 9, nhưng nếu điều đó tốt với bạn, bạn có thể sử dụng div với background-imagevà đặt background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Bây giờ bạn chỉ có thể đặt kích thước div của mình thành bất cứ điều gì bạn muốn và không chỉ hình ảnh sẽ giữ tỷ lệ khung hình của nó, nó cũng sẽ được tập trung cả theo chiều dọc và chiều ngang trong div. Chỉ cần đừng quên đặt kích thước trên css vì div không có thuộc tính width / height trên thẻ.

Cách tiếp cận này khác với câu trả lời của setecs, sử dụng vùng này hình ảnh sẽ không đổi và được xác định bởi bạn (để lại các khoảng trống theo chiều ngang hoặc chiều dọc tùy thuộc vào kích thước div và tỷ lệ khung hình của hình ảnh), trong khi câu trả lời setecs sẽ giúp bạn có một hộp chính xác kích thước của hình ảnh tỷ lệ (không có khoảng trống).

Chỉnh sửa: Theo tài liệu kích thước nền MDN, bạn có thể mô phỏng thuộc tính kích thước nền trong IE8 bằng cách sử dụng khai báo bộ lọc độc quyền:

Mặc dù Internet Explorer 8 không hỗ trợ thuộc tính kích thước nền, nhưng có thể mô phỏng một số chức năng của nó bằng chức năng bộ lọc -ms không chuẩn:

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

Rất giống với một số câu trả lời ở đây, nhưng trong trường hợp của tôi, tôi đã có những hình ảnh đôi khi cao hơn, đôi khi lớn hơn.

Phong cách này hoạt động như một nét duyên dáng để đảm bảo rằng tất cả các hình ảnh đều sử dụng tất cả không gian có sẵn, giữ nguyên tỷ lệ và không cắt giảm:

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

Xóa thuộc tính "chiều cao".

<img src="big_image.jpg" width="900" alt=""/>

Bằng cách chỉ định cả hai bạn đang thay đổi tỷ lệ khung hình của hình ảnh. Chỉ cần đặt một cái sẽ thay đổi kích thước nhưng giữ nguyên tỷ lệ khung hình.

Tùy chọn, để hạn chế quá khổ:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Chỉ cần thêm nó vào css của bạn, Nó sẽ tự động thu nhỏ và mở rộng với việc giữ tỷ lệ ban đầu.

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

Không có cách nào tiêu chuẩn để duy trì tỉ lệ cho hình ảnh với width, heightvà max-widthquy định với nhau.

Vì vậy, chúng tôi buộc phải chỉ định widthvà heightđể ngăn chặn trang Jumps nhảy trong khi tải hình ảnh, hoặc sử dụng max-widthvà không chỉ định kích thước cho hình ảnh.

Việc chỉ định width(không có height) thường không có nhiều ý nghĩa, nhưng bạn có thể cố gắng ghi đè heightthuộc tính HTML bằng cách thêm quy tắc như IMG {height: auto; }vào biểu định kiểu của bạn.

Xem thêm lỗi Firefox liên quan 392261 .

Đây là một giải pháp:

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

Điều này sẽ đảm bảo hình ảnh luôn bao phủ toàn bộ cha mẹ (thu nhỏ xuống và lên) và giữ nguyên tỷ lệ khung hình.

Đặt lớp CSS của thẻ chứa hình ảnh của bạn thành image-class:

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

và thêm cái này cho bạn bản định kiểu CSS của bạn.

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

Để duy trì hình ảnh phản hồi trong khi vẫn thực thi hình ảnh phải có tỷ lệ khung hình nhất định, bạn có thể làm như sau:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

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

Điều này có thể được sử dụng để thực thi một tỷ lệ khung hình nhất định, bất kể kích thước của hình ảnh mà tác giả tải lên.

Cảm ơn @Koseso tại http://codepen.io/Koseso/pen/bfdhg . Kiểm tra URL này để biết thêm tỷ lệ và một ví dụ hoạt động.

Để buộc hình ảnh phù hợp với kích thước chính xác, bạn không cần phải viết quá nhiều mã. Nó rất đơn giản

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/

Dưới đây là câu trả lời nếu bạn muốn đặt hình ảnh với tỷ lệ phần trăm chiều rộng cố định , nhưng không phải là pixel chiều rộng cố định .

Và điều này sẽ hữu ích khi xử lý kích thước màn hình khác nhau .

Thủ đoạn là

1. Sử dụng padding-topđể đặt chiều cao từ chiều rộng.
2. Sử dụng position: absoluteđể đặt hình ảnh trong không gian đệm.
3. Sử dụng max-height and max-widthđể đảm bảo hình ảnh sẽ không qua phần tử cha.
4. sử dụng display:block and margin: autođể căn giữa hình ảnh.

Tôi cũng đã nhận xét hầu hết các thủ thuật bên trong fiddle.

Tôi cũng tìm thấy một số cách khác để thực hiện điều này. Sẽ không có hình ảnh thực trong html, vì vậy tôi cá nhân trả lời câu trả lời hàng đầu khi tôi cần phần tử "img" trong html.

css đơn giản bằng cách sử dụng nền http://jsfiddle.net/4660s79h/2/

hình nền với từ trên đầu http://jsfiddle.net/4660s79h/1/

Khái niệm sử dụng vị trí tuyệt đối là từ đây http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Bạn có thể sử dụng điều này:

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

Bạn có thể tạo một div như thế này:

<div class="image" style="background-image:url('/to/your/image')"></div>

Và sử dụng css này để tạo kiểu cho nó:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Tôi sẽ đề xuất một cách tiếp cận đáp ứng, cách tốt nhất là sử dụng các đơn vị Viewport và các thuộc tính tối thiểu / tối đa như sau:

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

Điều này sẽ làm thu nhỏ hình ảnh nếu nó quá lớn đối với khu vực được chỉ định (vì nhược điểm, nó sẽ không phóng to hình ảnh).

Giải pháp của setec là tốt cho "Shrink to Fit" ở chế độ tự động. Nhưng, để tối ưu MỞ RỘNG để phù hợp với chế độ 'tự động', trước tiên bạn cần đặt hình ảnh nhận được vào id tạm thời, Kiểm tra xem nó có thể được mở rộng về chiều cao hoặc chiều rộng hay không (tùy theo tỷ lệ khung hình của nó v / s tỷ lệ khung hình của khối hiển thị của bạn),

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

Cách tiếp cận này hữu ích khi hình ảnh nhận được nhỏ hơn hộp hiển thị. Bạn phải lưu chúng trên máy chủ của mình ở kích thước Nhỏ ban đầu thay vì phiên bản mở rộng của chúng để lấp đầy Hộp hiển thị lớn hơn của bạn để tiết kiệm kích thước và băng thông.

Làm thế nào về việc sử dụng một yếu tố giả cho căn chỉnh dọc? Mã ít hơn này là cho một băng chuyền nhưng tôi đoán nó hoạt động trên mọi thùng chứa kích thước cố định. Nó sẽ giữ tỷ lệ khung hình và chèn các thanh @ xám-tối trên đầu / dưới hoặc trái / ghi cho kích thước ngắn nhất. Trong khi đó, hình ảnh được căn giữa theo chiều ngang bởi văn bản - căn chỉnh và theo chiều dọc bởi yếu tố giả.

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

Trình bày toàn màn hình:

img[data-attribute] {height: 100vh;}

Hãy nhớ rằng nếu chiều cao cổng xem lớn hơn hình ảnh, hình ảnh sẽ tự nhiên xuống cấp so với sự khác biệt.

Tôi nghĩ rằng, cuối cùng thì đây là giải pháp tốt nhất, dễ dàng và đơn giản :

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