HTML/IE: image căng để phù hợp, duy trì tỉ lệ

Question

Trong một cửa sổ HTML, tôi đang thiết lập một cơ thể tùy chỉnh

<img src="file://[filename]"> 

để hiển thị một hình ảnh.

Bây giờ tôi muốn tạo hình ảnh cho vừa với cửa sổ có sẵn, nhưng vẫn giữ nguyên tỉ lệ khung hình.

<img src="file://[filename]" width="100%" height="100"> 

kéo dài nhưng cũng bóp méo hình ảnh.

Có một số thủ thuật HTML để thực hiện điều đó không? Giải pháp duy nhất của IE là tốt, vì đây là một điều khiển được lưu trữ trên máy chủ.

Answer 1

Nếu bạn muốn duy trì tỷ lệ khung hình, bạn chỉ cần xác định một chiều ví dụ:

<img src="file://[filename]" width="100%" alt="" /> 

Bạn có thể sử dụng javascript để xác định chiều hướng tối đa và thay đổi kích thước phù hợp

<script type="text/javascript"> 
function getImgSize(id){ 
var pic = document.getElementById(id); 
var h = pic.offsetHeight; 
var w = pic.offsetWidth; 
alert ('The image size is '+w+'*'+h); 
} 
</script> 

Answer 2

Không có HTML thuần túy.

Điều này có thể được thực hiện bằng JavaScript nếu bạn biết tỷ lệ co của hình ảnh. Tuy nhiên, không biết liệu điều đó có thể thực hiện được thông qua JS hay không, nhưng bạn có thể chuyển giá trị đó cho JavaScript nếu bạn đang sử dụng bất kỳ ngôn ngữ nào khác.

Answer 3

Không, bạn sẽ phải sử dụng Javascript cho điều này và nó phức tạp hơn âm thanh. Tôi đã làm một cái gì đó tương tự như các tuần khác, ở đây; s chức năng tôi đã tạo cho nó, bạn có thể có thể tái thích hợp nó

Oh, và nó cần jQuery

function resize_background(){ 

    var target = $("#background_image"); 
    var window = $(window); 
    var ratio = 1; 
    var anchor_point = 200; 
    var register_point = 400; 

    if(window.width() > min_width){ 
     ratio = window.width()/min_width; 
     target.css("marginLeft", 0); 
    }else{ 
     // center to screen 
     // For this project, this aint needed. 
     //var left_margin = (window.width()/2) - (min_width/2); 
     //target.css("marginLeft", left_margin); 
    } 

    // now figure out anchor stuff 
    var top = ((register_point * ratio) - anchor_point) * -1; 

    target.width(min_width * ratio); 
    target.height(min_height * ratio); 
    target.css("marginTop", top); 

    $("#trace").text(top); 


} 

Answer 4

Nếu bạn biết một trong hai chiều cao hoặc chiều rộng, bạn chỉ có thể đặt. Thứ nguyên khác sẽ được đặt tự động dựa trên tỷ lệ khung hình của hình ảnh.

Answer 5

tinh khiết giải pháp HTML: đây là kỹ thuật của tôi.

.iCon { 
    height: 267px; 
    width: 520px; 
    background-color: #0F3; 
    overflow: hidden; 
    } 
.iCon img { 
    margin-right: auto; 
    margin-left: auto; 
    height: 350px; 
    text-align: center; 
    display: table-cell; 
    margin-top: -50px; 
    } 

HTML:

<div class="iCon"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

DEMO: http://jsfiddle.net/PBbcF/

Answer 6

rộng Setting = 100% là không chính xác một câu trả lời tuyệt vời vì nó không chiếm chiều cao và thể tràn các yếu tố trong Y hướng ra khỏi cửa sổ.

Giải pháp này thay đổi kích thước phần tử một lần khi tải và cũng thay đổi kích thước, kiểm tra tỷ lệ co của cửa sổ và xác định xem chiều cao có nên là 100% hay chiều rộng phải là 100%. Điều này sẽ luôn giữ nguyên tố FULL trong cửa sổ và tối đa hóa trong khi vẫn giữ nguyên tỷ lệ khung hình.

function changeElementSize(){ 
    // Compare your element's aspect ratio with window's aspect ratio 
    // My element was 100w x 80h so mine was 1.25 
    if (window.innerWidth/window.innerHeight > 1.25){ 
     $('#element').css('height','100%'); 
     $('#element').css('width','auto'); 
    } else { 
     $('#element').css('width','100%'); 
     $('#element').css('height','auto'); 
    } 
} 

$(window).resize(function() { 
    changeElementSize(); 
}); 

$(window).load(function() { 
    changeElementSize(); 
}); 

Answer 7

phiên bản mã này @hfarazm làm cho một div trong Mà pic là vào kích thước đầy đủ vert làm trung tâm theo chiều ngang, nếu bạn thực hiện nó kích thước đầy đủ theo chiều ngang nó sẽ được tập trung theo chiều dọc, tôi nghĩ rằng cách tốt nhất của nó mà không sử dụng js (với tommybananas code nó có thể có thể để làm cho nó hoàn toàn làm việc) hoặc php hay cái gì khác: HTML

<div class="centeredImage"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

CSS

.centeredImage { 
    height: 500px; 
    width: 500px; 
    background: rgba(0,0,0,0.0); 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.centeredImage img { 
    margin: auto; 
    width: 500px; 
} 

http://jsfiddle.net/5p0ugfLw/