Cho phép hình ảnh co lại, nhưng không kéo dài

Question

Tôi có trang web có hơn 4.000 trang và 10 hình ảnh jpeg trên mỗi trang, có kích thước khác nhau. Tôi đang cố gắng làm cho trang web thân thiện với thiết bị di động hơn. Để kết thúc, tôi muốn làm cho nó có thể cho các hình ảnh để thu nhỏ để phù hợp với màn hình nhỏ hơn. Tôi biết rằng tôi có thể làm một cái gì đó như thế này để báo hiệu rằng hình ảnh có thể thu nhỏ:

img.bodyImg 
{ 
width: 100%; 
max-width: 357px; 
height: auto; 
} 

Nhưng nếu không phải tất cả các hình ảnh có chiều rộng 357 (hoặc bất kỳ), và tôi không muốn nhỏ hình ảnh lây lan ra ngoài kích thước thật của họ? Và chỉ để làm cho mọi thứ thú vị hơn, điều gì sẽ xảy ra nếu các thẻ hình ảnh không có thuộc tính chiều cao và chiều rộng được chỉ định?

Mục tiêu của tôi là tìm giải pháp không yêu cầu tôi điều chỉnh hàng chục nghìn cuộc gọi hình ảnh theo cách thủ công, nhưng tôi có thể thực hiện tìm kiếm và thay thế. Hình ảnh hiện được bao gói trong một thùng chứa div và có một lớp học, như vậy:

<div class="imgDiv"><img class="bodyImg" src="http://www.example.com/image.jpg"></div> 

Tôi cũng mở ra khả năng tôi đang làm điều này một cách sai lầm hoàn toàn.

Answer 1

Sử dụng max-width rất đơn giản, hiệu quả và không yêu cầu JavaScript.

CSS bên dưới tạo hình ảnh phản hồi thu nhỏ để vừa với chiều rộng của vùng chứa nhưng không mở rộng ra ngoài kích thước gốc của vùng chứa.

img.bodyImg { 
    max-width:100% 
} 

Trong phần trình bày bên dưới, cả hai hình ảnh là 300px X 75px. Vùng chứa đầu tiên rộng 200px và vùng chứa thứ hai rộng 400px. Lưu ý rằng hình ảnh đầu tiên co lại để vừa với vùng chứa, nhưng hình ảnh thứ hai không mở rộng ra ngoài kích thước gốc của nó. Cũng lưu ý rằng tỷ lệ của mỗi hình ảnh vẫn chính xác.

div { 
 
    background-color: #CCC; 
 
    margin:0 0 .5em; 
 
    padding:.25em; 
 
} 
 
div.one { 
 
    width: 200px; 
 
} 
 
div.two { 
 
    width: 400px; 
 
} 
 
img { 
 
    display:block; 
 
    max-width: 100%; 
 
}

<div class="one"> 
 
    <img src="http://lorempixel.com/300/75/abstract/4/" /> 
 
</div> 
 
<div class="two"> 
 
    <img src="http://lorempixel.com/300/75/abstract/4/" /> 
 
</div>

Ghi chú bổ sung

1. Tôi đã bao gồm display:block để loại bỏ các descender space bên dưới hình ảnh.
2. Nếu hình ảnh của bạn có các thuộc tính chiều cao và chiều rộng cụ thể (như chúng arguably should), bạn có thể thêm height:auto và/hoặc width:auto để ghi đè các thuộc tính đó.
3. Bootstrap uses this method cho hình ảnh phản hồi.

Answer 2

Bạn có thể sử dụng một chút jQuery để figure out each image's native width, và thiết lập perscriptive max-độ rộng cho mỗi hình ảnh sau:

$('.bodyImg').each(function() { 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = $(this).attr("src"); 

    // Get accurate measurements from that. 
    var imageWidth = theImage.width; 

    $(this).css({ 
    "max-width" : imageWidth 
    }); 


} 

UPDATE: Và nếu bạn muốn mỗi hình ảnh có chiều rộng thống nhất, bạn có thể lưu trữ chiều rộng tối đa nhỏ nhất và áp dụng nó cho tất cả các hình ảnh:

var smallMax; 
$('.bodyImg').each(function() { 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = $(this).attr("src"); 

    // Get accurate measurements from that. 
    var imageWidth = theImage.width; 

    // if the variable exists and is bigger than 
    // the current width, use the new max width 
    if (smallMax !== undefined && smallMax > imageWidth) { 
    smallMax = imageWidth; 
    } 
    // set the variable if it hasn't been set yet 
    else if (smallMax == undefined) { 
    smallMax = imageWidth; 
    } 
    // keep the old variable if it is defined and smaller 
    else {} 


    $(this).css({ 
    "max-width" : smallMax 
    }); 


} 

Answer 3

Tại sao không chỉ:

max-width:100%; /*Ensure the width scales to the width of the parent container*/ 
width:auto; /* Not required, but sometimes is nice to ensure the width not being overridden by other factors like browser quirks */ 
height: auto; /*Ensure the image keeps its ratio*/ 

Answer 4

Thử sử dụng max-width:100% and height: auto trong css của bạn.Nếu bạn muốn làm cho trang web của bạn thân thiện với thiết bị di động, tôi khuyên bạn nên tìm kiếm khung công tác khởi động để linh hoạt hơn.