HTML/IE：拉伸图像以适应，保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/643500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/IE: stretch image to fit, preserve aspect ratio
提问by peterchen
In an HTML window, I am setting a custom body
在 HTML 窗口中，我正在设置自定义正文
<img src="file://[filename]">
to display an image.
显示图像。
Now I want to strectch the image to fit the available window, but preserve aspect ratio.
现在我想拉伸图像以适应可用窗口，但保留纵横比。
<img src="file://[filename]" width="100%" height="100">
stretches but also distorts the image.
拉伸但也会扭曲图像。
Is there some HTML trickery to do that? IE only solution is fine, since this is in a hosted broweser control.
是否有一些 HTML 技巧可以做到这一点？IE 唯一的解决方案很好，因为这是在托管浏览器控件中。
回答by Philippe
If you want to preserve aspect ratio, you only need to specify one dimension ie:
如果你想保持纵横比，你只需要指定一个维度，即：
<img src="file://[filename]" width="100%" alt="" />
You can use javascript to determine max dimension and resize accordingly
您可以使用 javascript 来确定最大尺寸并相应地调整大小
<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>
回答by tgecho
If you know either the height or width, you can set only that. The other dimension will be automatically set based on the aspect ratio of the image.
如果您知道高度或宽度，则只能设置它。另一个尺寸将根据图像的纵横比自动设置。
回答by gargantuan
Nope, you're going to have to use Javascript for this, and it's trickier than it sounds. I did something similar the other week, here;s the function I created for it, you might be able to re-appropriate it
不，您将不得不为此使用 Javascript，而且这比听起来要棘手。前一周我做了类似的事情，这里是我为它创建的功能，你也许可以重新调整它
Oh, and it needs jQuery
哦，它需要 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);
}
回答by tommybananas
Setting width = 100% isn't exactly a great answer because it doesn't account for height and could overflow the element in the Y direction off the window.
设置 width = 100% 并不是一个很好的答案，因为它不考虑高度并且可能会使 Y 方向的元素溢出窗口。
This solution resizes the element once on load and also on resize, checking the aspect ratio of the window and determining if height should be 100% or width should be 100%. This will always keep the FULL element in the window and maximized while preserving aspect ratio.
此解决方案在加载和调整大小时调整元素大小，检查窗口的纵横比并确定高度应为 100% 还是宽度应为 100%。这将始终保持窗口中的 FULL 元素并最大化，同时保持纵横比。
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();
});
回答by SupraLP
this version of @hfarazm code makes a div in wich the pic is on full vert size centered horizontally, if you make it full size horizontally it would be vertically centered, I think its the best way without using js (with tommybananas code it may be possible to make it completely work) or php or something else: HTML
这个版本的@hfarazm 代码制作了一个 div，其中图片位于水平居中的全垂直尺寸上，如果您将其水平设置为全尺寸，它将垂直居中，我认为这是不使用 js 的最佳方法（使用 tommybananas 代码可能是可能使它完全工作）或 php 或其他东西：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
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;
}
回答by hfarazm
pure HTML solution: this is my technique.
纯 HTML 解决方案：这是我的技术。
.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:
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>
回答by ólafur Waage
Pure HTML no.
纯 HTML 没有。
This could be done in JavaScript if you know the aspect ratio of the image. Don't know if that is possible via JS though, but you could pass that value to the JavaScript if you are using any other language as well.
如果您知道图像的纵横比，这可以在 JavaScript 中完成。不知道这是否可以通过 JS 实现，但是如果您也使用任何其他语言，则可以将该值传递给 JavaScript。
