Làm thế nào để bạn tự động thay đổi kích thước một hình ảnh lớn để nó phù hợp với một thùng chứa div chiều rộng nhỏ hơn trong khi duy trì tỷ lệ chiều rộng: chiều cao của nó?

Ví dụ: stackoverflow.com - khi một hình ảnh được chèn vào bảng chỉnh sửa và hình ảnh quá lớn để vừa với trang, hình ảnh sẽ tự động thay đổi kích thước.

Không áp dụng chiều rộng hoặc chiều cao rõ ràng cho thẻ hình ảnh. Thay vào đó, đưa ra:

max-width:100%;
max-height:100%;

Ngoài ra, height: auto;nếu bạn muốn chỉ định chiều rộng.

Ví dụ: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

phù hợp với đối tượng

Hóa ra có một cách khác để làm điều này.

<img style='height: 100%; width: 100%; object-fit: contain'/>

sẽ làm việc Đó là CSS 3 thứ.

Câu đố: http://jsfiddle.net/mbHB4/7364/

Hiện tại không có cách nào để thực hiện điều này một cách chính xác theo cách xác định, với các hình ảnh có kích thước cố định như các tệp JPEG hoặc PNG.

Để thay đổi kích thước một hình ảnh tương ứng, bạn phải thiết lập hoặc chiều cao hoặc chiều rộng để "100%", nhưng không phải cả hai. Nếu bạn đặt cả hai thành "100%", hình ảnh của bạn sẽ được kéo dài.

Việc chọn làm chiều cao hay chiều rộng tùy thuộc vào kích thước hình ảnh và vùng chứa của bạn:

1. Nếu hình ảnh và vật chứa của bạn đều là "hình chân dung" hoặc cả "hình phong cảnh" (cao hơn chiều rộng hoặc rộng hơn chiều cao tương ứng), thì không có vấn đề gì về chiều cao hay chiều rộng là "% 100" .
2. Nếu hình ảnh của bạn là chân dung và thùng chứa của bạn là phong cảnh, bạn phải đặt height="100%"trên hình ảnh.
3. Nếu hình ảnh của bạn là phong cảnh và thùng chứa của bạn là chân dung, bạn phải đặt width="100%"trên hình ảnh.

Nếu hình ảnh của bạn là một SVG, là định dạng hình ảnh vector có kích thước thay đổi, bạn có thể mở rộng để phù hợp với vùng chứa xảy ra tự động.

Bạn chỉ cần đảm bảo rằng tệp SVG không có thuộc tính nào trong số các thuộc tính này được đặt trong <svg>thẻ:

height
width
viewbox

Hầu hết các chương trình vẽ vector ngoài đó sẽ đặt các thuộc tính này khi xuất tệp SVG, do đó bạn sẽ phải chỉnh sửa thủ công tệp của mình mỗi khi bạn xuất hoặc viết tập lệnh để thực hiện.

Đây là một giải pháp sẽ điều chỉnh cả theo chiều dọc và chiều ngang của img trong div mà không bị kéo dài ngay cả khi hình ảnh được cung cấp quá nhỏ hoặc quá lớn để phù hợp với div.

Nội dung HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

Nội dung CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

Phần jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Làm nó đơn giản!

Đặt một thùng chứa cố định height và sau đó cho imgthẻ bên trong nó, đặt widthvà max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Sự khác biệt là bạn đặt width100% chứ không phải max-width.

Một bản hack đẹp.

Bạn có hai cách để làm cho hình ảnh phản ứng nhanh.

1. Khi một hình ảnh là một hình ảnh nền.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Chạy nó ở đây

2. Khi hình ảnh ở trong img thẻ.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Chạy nó ở đây

Bạn có thể đặt hình ảnh làm nền thành div, sau đó sử dụng thuộc tính kích thước nền CSS :

background-size: cover;

Nó sẽ "Chia tỷ lệ hình nền càng lớn càng tốt để vùng nền được bao phủ hoàn toàn bởi hình nền. Một số phần của hình nền có thể không được xem trong khu vực định vị nền" - W3Schools

Kiểm tra giải pháp của tôi: http://codepen.io/petethepig/pen/dvFsA

Nó được viết bằng CSS thuần túy, không có bất kỳ mã JavaScript nào. Nó có thể xử lý hình ảnh của bất kỳ kích thước và bất kỳ định hướng.

Cho HTML như vậy:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

mã CSS sẽ là:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Tôi vừa xuất bản một plugin jQuery thực hiện chính xác những gì bạn cần với rất nhiều tùy chọn:

https://github.com/GestiXi/image-scale

Sử dụng:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

Giải pháp này không kéo dài hình ảnh và lấp đầy toàn bộ thùng chứa, nhưng nó cắt một số hình ảnh.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

Tôi thấy rằng nhiều người đã đề xuất sự phù hợp với đối tượng, đó là một lựa chọn tốt. Nhưng nếu bạn muốn nó hoạt động trong các trình duyệt cũ hơn , có một cách khác để làm điều đó một cách dễ dàng.

Nó khá đơn giản. Cách tiếp cận tôi thực hiện là định vị hình ảnh bên trong container với một cách tuyệt đối và sau đó đặt nó ngay tại trung tâm bằng cách sử dụng kết hợp:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Khi nó ở giữa, tôi đưa ra hình ảnh,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Điều này làm cho hình ảnh có được hiệu ứng của Object-fit: cover.

Dưới đây là một minh chứng về logic trên.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Logic này hoạt động trong tất cả các trình duyệt.

Sau đây hoạt động hoàn hảo cho tôi:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Tôi có giải pháp tốt hơn nhiều mà không cần bất kỳ JavaScript nào. Nó hoàn toàn đáp ứng, và tôi sử dụng nó rất nhiều. Bạn thường cần phải phù hợp với hình ảnh của bất kỳ tỷ lệ khung hình nào cho thành phần chứa với tỷ lệ khung hình được chỉ định. Và có toàn bộ điều này đáp ứng đầy đủ là phải.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Bạn có thể đặt độc lập chiều rộng tối đa và chiều cao tối đa; hình ảnh sẽ tôn trọng cái nhỏ nhất (tùy thuộc vào giá trị và tỷ lệ khung hình của hình ảnh). Bạn cũng có thể đặt hình ảnh được căn chỉnh theo ý muốn (ví dụ: đối với hình ảnh sản phẩm trên nền trắng vô hạn, bạn có thể dễ dàng đặt nó xuống dưới cùng ở giữa).

Cung cấp chiều cao và chiều rộng bạn cần cho hình ảnh của mình cho div có chứa thẻ <img>. Đừng quên cung cấp chiều cao / chiều rộng trong thẻ kiểu thích hợp.

Trong thẻ <img>, cung cấp cho max-height và max-widthdưới dạng 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Bạn có thể thêm các chi tiết trong các lớp thích hợp sau khi bạn hiểu đúng.

Mã dưới đây được điều chỉnh từ các câu trả lời trước và được tôi kiểm tra bằng hình ảnh có tên storm.jpg .

Đây là mã HTML hoàn chỉnh cho một trang đơn giản hiển thị hình ảnh. Điều này hoạt động hoàn hảo và đã được tôi thử nghiệm với www.resizemybrowser.com. Đặt mã CSS ở đầu mã HTML của bạn, bên dưới phần đầu của bạn. Đặt mã hình ảnh bất cứ nơi nào bạn muốn hình ảnh.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Bạn phải cho trình duyệt biết chiều cao của nơi bạn đang đặt nó:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Chỉnh sửa: Định vị hình ảnh dựa trên bảng trước có vấn đề trong Internet Explorer 11 ( max-heightkhông hoạt động trong display:tablecác phần tử). Tôi đã thay thế nó bằng định vị dựa trên nội tuyến, nó không chỉ hoạt động tốt trong cả Internet Explorer 7 và Internet Explorer 11, mà còn yêu cầu ít mã hơn.

Đây là tôi đưa về chủ đề này. Nó sẽ chỉ hoạt động nếu container có kích thước xác định ( max-widthvà max-heightdường như không khớp với các container không có kích thước cụ thể), nhưng tôi đã viết nội dung CSS theo cách cho phép sử dụng lại (thêm picture-framelớp vàpx125 lớp kích thước để chứa hiện tại của bạn).

Trong CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Và trong HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

BẢN GIỚI THIỆU

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Chỉnh sửa: Có thể cải thiện hơn nữa bằng cách sử dụng JavaScript (nâng cấp hình ảnh):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Tôi đã khắc phục vấn đề này bằng cách sử dụng mã sau đây:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Như đã trả lời ở đây , bạn cũng có thể sử dụng vhcác đơn vị thay vì max-height: 100%nếu nó không hoạt động trên trình duyệt của bạn (như Chrome):

img {
    max-height: 75vh;
}

Tôi đã căn giữa và chia tỷ lệ một hình ảnh bên trong một siêu liên kết theo cả chiều ngang và chiều dọc theo cách này:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Nó đã được thử nghiệm trong Internet Explorer, Firefox và Safari.

Thông tin thêm về định tâm là ở đây .

Câu trả lời được chấp nhận từ Thorn007 không hoạt động khi hình ảnh quá nhỏ .

Để giải quyết điều này, tôi đã thêm một yếu tố quy mô . Bằng cách này, nó làm cho hình ảnh lớn hơn và lấp đầy thùng chứa div.

Thí dụ:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Ghi chú:

1. Đối với WebKit, bạn phải thêm -webkit-transform:scale(4); -webkit-transform-origin:left top;theo kiểu.
2. Với hệ số tỷ lệ là 4, bạn có max-width = 400/4 = 100 và max-height = 200/4 = 50
3. Một giải pháp thay thế là đặt chiều rộng tối đa và chiều cao tối đa ở mức 25%. Nó thậm chí còn đơn giản hơn.

Nếu bạn đang sử dụng Bootstrap, bạn chỉ cần thêm img-responsivelớp vào imgthẻ:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Hình ảnh Bootstrap

Một giải pháp đơn giản (sửa 4 bước !!) có vẻ hiệu quả với tôi, dưới đây. Ví dụ sử dụng chiều rộng để xác định kích thước tổng thể, nhưng bạn cũng có thể lật nó để sử dụng chiều cao thay thế.

1. Áp dụng kiểu CSS cho bộ chứa hình ảnh (ví dụ: <img>)
2. Đặt thuộc tính chiều rộng cho kích thước bạn muốn
   • Đối với kích thước, sử dụng %cho kích thước tương đối hoặc tự động cân bằng (dựa trên vùng chứa hình ảnh hoặc màn hình)
   • Sử dụng px(hoặc khác) cho kích thước tĩnh hoặc đặt kích thước
3. Đặt thuộc tính chiều cao để tự động điều chỉnh, dựa trên chiều rộng
4. THƯỞNG THỨC!

Ví dụ,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Tất cả các câu trả lời được cung cấp, bao gồm cả câu trả lời được chấp nhận, chỉ hoạt động theo giả định rằng divtrình bao bọc có kích thước cố định. Vì vậy, đây là cách thực hiện bất kể kích thước của divtrình bao bọc là gì và điều này rất hữu ích nếu bạn phát triển một trang đáp ứng:

Viết các khai báo bên trong DIVbộ chọn của bạn :

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Sau đó đặt các khai báo bên trong IMGbộ chọn của bạn :

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

RẤT QUAN TRỌNG:

Giá trị của maxHeightphải giống nhau cho cả bộ chọn DIVvà IMGbộ chọn.

Một giải pháp đơn giản là sử dụng flexbox. Xác định CSS của container để:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Điều chỉnh chiều rộng hình ảnh chứa thành 100% và bạn sẽ có được một hình ảnh trung tâm đẹp trong thùng chứa với kích thước được giữ nguyên.

Giải pháp rất dễ dàng với một chút toán học ...

Chỉ cần đặt hình ảnh trong một div và sau đó trong tệp HTML nơi bạn chỉ định hình ảnh. Đặt giá trị chiều rộng và chiều cao theo tỷ lệ phần trăm bằng cách sử dụng giá trị pixel của hình ảnh để tính tỷ lệ chính xác của chiều rộng và chiều cao.

Ví dụ: giả sử bạn có một hình ảnh có chiều rộng 200 pixel và chiều cao 160 pixel. Bạn có thể nói một cách an toàn rằng giá trị chiều rộng sẽ là 100%, vì đó là giá trị lớn hơn. Để tính giá trị chiều cao, bạn chỉ cần chia chiều cao cho chiều rộng sẽ cho giá trị phần trăm là 80%. Trong mã nó sẽ trông giống như thế này ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Cách đơn giản nhất để làm điều này là sử dụng object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

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

Nếu bạn đang sử dụng Bootstrap, chỉ cần thêm img-responsivelớp và thay đổi thành

.container img{
    object-fit: cover;
}

Kiểm tra câu trả lời của tôi, Tạo một hình ảnh phản hồi - cách đơn giản nhất -

img{
    width: 100%;
    max-width: 800px;
}

Hoặc bạn chỉ có thể sử dụng:

background-position:center;
background-size:cover;

Bây giờ hình ảnh sẽ chiếm tất cả không gian của div.