Helpex - Trao đổi & giúp đỡ Đăng nhập
437

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, heightwidthđã đượ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 width=500height=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.

437 hữu ích 0 bình luận 1.1m xem chia sẻ
16 trả lời 16
636

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

636 hữu ích 5 bình luận chia sẻ
188

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

188 hữu ích 5 bình luận chia sẻ
165

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.

165 hữu ích 5 bình luận chia sẻ
59

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 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')";
59 hữu ích 4 bình luận chia sẻ
27

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 quyến rũ để đả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;
}
27 hữu ích 2 bình luận chia sẻ
16

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;"/>
16 hữu ích 4 bình luận chia sẻ
10

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ữ nguyên tỷ lệ ban đầu.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
10 hữu ích 3 bình luận chia sẻ
7

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

Vì vậy, chúng tôi buộc phải chỉ định widthheightđể ngă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 .

7 hữu ích 3 bình luận chia sẻ
5

Đặ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;
}
5 hữu ích 0 bình luận chia sẻ
5

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

5 hữu ích 1 bình luận chia sẻ
5

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

5 hữu ích 0 bình luận chia sẻ
4

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

4 hữu ích 0 bình luận chia sẻ
2

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
2 hữu ích 3 bình luận chia sẻ
2

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%); 
}
2 hữu ích 0 bình luận chia sẻ
1

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

1 hữu ích 1 bình luận chia sẻ
0

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css image aspect-ratio , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading