Chỉnh kích thước ảnh trong css

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

This image is originally 400x400 pixels, but should get resized by the CSS:

.parent {
  width: 100px;
}

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

This image is originally 400x400 pixels, but should get resized by the CSS:

  

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

This image is originally 640x220, but should get resized by the CSS:

  
    
  

Đố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ẻ

answer

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ẻ

answer

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ẻ

answer

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ẻ

answer

16

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

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

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

answer

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ẻ

answer

7

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

answer

5

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

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ẻ

answer

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:

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

answer

5

//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 //jsfiddle.net/4660s79h/2/

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

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

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

answer

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

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

answer

2

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

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ẻ

answer

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ẻ

answer

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ẻ

answer

0

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}

This image is originally 400x400 pixels, but should get resized by the CSS:


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:

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