Chia tỷ lệ hình ảnh theo tỷ lệ trong CSS với chiều rộng tối đa

Question

Hiện tại, tôi đang sử dụng chiều rộng tối đa để chia tỷ lệ hình ảnh cho vừa. Tuy nhiên, chúng không tỷ lệ tương ứng. Có cách nào để điều này xảy ra không? Tôi đang mở Javascript/jQuery.

Nếu có thể, có cách nào để làm điều này mà không biết kích thước ban đầu của hình ảnh (có thể xác định điều này bằng cách sử dụng Javascript/jQuery) không?

Answer 1

Bạn cần phải xác định chiều rộng ban đầu và chiều cao:

<img src="/whatever" width="100" height="200" alt="Whatever" /> 

Và sau đó sử dụng một cái gì đó như thế này trong CSS:

#content img { max-width: 100%; height: auto } 

Bạn có thể thử điều này với jQuery nếu bạn không có chiều rộng và chiều cao lên phía trước, nhưng số dặm của bạn có thể thay đổi:

$(function(){ 
    $('#content img').load(function(){ 
     var $img = $(this); 
     $img.attr('width', $img.width()).attr('height', $img.height()); 
    }); 
}); 

Rõ ràng thay thế #content với bất kỳ bộ chọn nào bạn muốn phạm vi chức năng.

Answer 2

khi thiết lập liên tục sử dụng width:

height: auto 

Answer 3

function resizeBackground() { 
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width(); 
    var stageHeight=$(window).height(); 
    var newHeight=$("#myPic").height(); 
    if($(window).width() > $(window).height()) { 
     scale = stageHeight/newHeight; 
     scale = stageWidth/newWidth; 
    } else { 
     scale = stageWidth/newWidth; 
     scale = stageHeight/newHeight; 
    } 
    newWidth = newWidth*scale; 
    newHeight = newHeight*scale 
    $("#myPic").width(newWidth); 
    $("#myPic").height(newHeight); 
} 

Answer 4

Sử dụng cả chiều rộng và max-width vào hình ảnh vít lên IE8.

Đặt chiều rộng trên hình ảnh của bạn và quấn nó vào một div có chiều rộng tối đa. (Sau đó, nguyền rủa MS.)

Answer 5

Trái với câu trả lời được chấp nhận, bạn có thể làm điều này mà không chỉ định kích thước trong HTML. Tất cả có thể được thực hiện trong CSS:

#content img { 
    max-width: 100px; 
    width: 100%; 
    height: auto; 
} 

Answer 6

Dưới đây là cách thực hiện không có Javascript. Đặt số max-width của bạn theo chiều dài bạn muốn.

#content img { 
    max-width: 620px; 
    height: auto; 
} 

này làm việc cho tôi được thử nghiệm trên một máy Mac với Firefox 28, Chrome 34 và Safari 7 khi tôi không có thiết lập chiều rộng hoặc chiều cao một cách rõ ràng thiết lập trong img thẻ.

Không đặt chiều rộng của bạn ở CSS thành 100% sau cài đặt max-width như một người được đề xuất vì sau đó bất kỳ hình ảnh nào hẹp hơn chiều rộng của vùng chứa (như biểu tượng) sẽ bị thổi lớn hơn nhiều so với mong muốn.

Answer 7

tôi phải làm điều này với các yêu cầu sau:

1. Trang không phải có được reflown khi hình ảnh tải. Kích thước hình ảnh được biết ở phía máy chủ và các tính toán có thể được thực hiện.
2. Hình ảnh phải mở rộng quy mô tương ứng
3. hình ảnh không phải là rộng hơn so với các yếu tố có chứa
4. Hình ảnh phải không được nhân rộng, chỉ xuống khi cần thiết
5. Phải sử dụng một yếu tố img và không phải là một nền để đảm bảo hình ảnh cũng in đúng cách
6. Không có JavaScript!

Điều gần nhất tôi nghĩ ra là cuộc tấn công khủng khiếp này. Nó đòi hỏi ba yếu tố và hai phong cách nội tuyến, nhưng theo như tôi biết đây là cách tốt nhất để quy mô hình ảnh tương ứng. Tất cả các đề xuất height: auto; ở đây phủ nhận điểm xác định kích thước hình ảnh ở phía máy chủ và khiến nội dung nhảy xung quanh trong khi tải.

.image { 
    position: relative; 
} 

.image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

<!-- container element with max-width prevents upscaling --> 
<div class="image" style="max-width: 640px;"> 
    <!-- div with padding equal to the image aspect ratio to make 
     the element the correct height --> 
    <div style="padding-top: 75%;"></div> 
    <!-- img scaled to completely fill container --> 
    <img src="//placebear.com/640/480" /> 
</div> 

https://jsfiddle.net/Lqg1fgry/6/ - "Xin chào" ở đó để bạn có thể xem nội dung sau khi hình ảnh có nhảy xung quanh hay không.

Answer 8

hy vọng nó không phải là quá muộn, nhưng với điều này pease của mã tôi quản lý để có được hình ảnh tỷ lệ thuận trong bộ sưu tập của tôi. nó sẽ mất thời gian để hiểu những gì đang xảy ra nhưng hãy thử nó và tận hưởng.

<style> 
div_base { 
    width: 200px; // whatever size you want as constrain unchangeable 
    max-width: 95%; // this is connected to img and mus exist 
} 
div_base img { 
    width: auto !important; // very important part just have it there! 
    height: 95%; // and this one is linked to maxW above. 
} 
</style>