Làm cách nào để điều chỉnh hình ảnh (img) bên trong div và giữ tỷ lệ khung hình?

Tôi có div 48x48 và bên trong nó có phần tử img, tôi muốn lắp nó vào div mà không mất bất kỳ phần nào, trong thời gian đó tỷ lệ được giữ, có thể đạt được bằng cách sử dụng html và css không?

Bạn sẽ cần một số JavaScript để ngăn chặn việc cắt xén nếu bạn không biết kích thước của hình ảnh tại thời điểm bạn đang viết css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Nếu bạn sử dụng Thư viện JavaScript, bạn có thể muốn tận dụng lợi thế của nó.

Sử dụng max-height:100%; max-width:100%;cho hình ảnh bên trong div.

Thật không may, chiều rộng tối đa + chiều cao tối đa không hoàn toàn bao gồm nhiệm vụ của tôi ... Vì vậy, tôi đã tìm thấy một giải pháp khác:

Để lưu tỷ lệ Hình ảnh trong khi chia tỷ lệ, bạn cũng có thể sử dụng object-fitCSS3 propperty.

Bài viết hữu ích: Kiểm soát tỷ lệ khung hình ảnh bằng CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Tin xấu: IE không được hỗ trợ ( Tôi có thể sử dụng )

Chỉ sử dụng CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Điều này sẽ làm cho hình ảnh mở rộng để lấp đầy cha mẹ của nó, trong đó kích thước của nó được đặt trong divCSS.

Tôi đã có rất nhiều vấn đề để làm việc này, mọi giải pháp tôi thấy dường như không hiệu quả.

Tôi nhận ra rằng tôi phải đặt màn hình div thành flex, vì vậy về cơ bản đây là CSS của tôi:

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

Hãy thử CSS:

img {
  object-fit: cover;
  height: 48px;
}

Đối với tôi, CSS sau đã hoạt động (được thử nghiệm trong Chrome, Firefox và Safari).

Có nhiều thứ làm việc cùng nhau:

• max-height: 100%;, max-width: 100%;Và height: auto;, width: auto;làm cho quy mô img đến bất cứ kích thước đạt đầu tiên 100% trong khi vẫn giữ tỉ lệ
• position: relative;trong thùng chứa và position: absolute;ở trẻ cùng với top: 50%;và căn left: 50%;giữa góc trên cùng bên trái của img trong thùng chứa
• transform: translate(-50%, -50%); di chuyển img trở lại bên trái và trên cùng một nửa kích thước của nó, do đó căn giữa img trong container

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Đặt ảnh làm ảnh nền sẽ giúp chúng tôi kiểm soát nhiều hơn về kích thước và vị trí, để lại thẻ img để phục vụ mục đích khác ...

Dưới đây, nếu chúng ta muốn div có cùng tỷ lệ khung hình với ảnh, thì placeholder.png là một hình ảnh trong suốt nhỏ với tỷ lệ khung hình tương tự như photo.jpg. Nếu ảnh là hình vuông, thì đó là một giữ chỗ 1px x 1px, nếu ảnh là hình thu nhỏ của video, thì đó là một giữ chỗ 16x9, v.v.

Cụ thể cho câu hỏi, sử dụng trình giữ chỗ 1x1 để duy trì tỷ lệ vuông của div, với hình ảnh nền sử dụng background-sizeđể duy trì tỷ lệ khung hình của ảnh.

Tôi đã sử dụng background-position: center center;để bức ảnh sẽ được tập trung vào div. (Căn chỉnh ảnh ở trung tâm dọc hoặc dưới cùng sẽ trở nên xấu xí với ảnh trong thẻ img.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Để tránh yêu cầu http thêm, hãy chuyển đổi hình ảnh giữ chỗ thành dữ liệu: URL .

<img src="data:image/png;base64,..."/>

bạn có thể sử dụng lớp "img-liquid" cho phiên bản mới hơn, ví dụ Bootstrap v4 .

và có thể sử dụng lớp "img-responsive" cho phiên bản cũ hơn như Bootstrap v3 .

Cách sử dụng : -

thẻ img với: -

class = "img-liquid"

src = "..."

Đây là một cách tiếp cận tất cả JavaScript. Nó thu nhỏ hình ảnh xuống dần dần cho đến khi nó khớp chính xác. Bạn chọn bao nhiêu để thu nhỏ nó mỗi lần nó thất bại. Ví dụ này thu nhỏ 10% mỗi lần thất bại:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Hãy sao chép và dán trực tiếp.

Những gì làm việc cho tôi là:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

inline-flex được yêu cầu để giữ cho hình ảnh không đi ra ngoài div.