[英]scale image to fit its parent object proportionally
I realise this has been asked many times under many guises , but most solutions seem to not care about the resulting image height, or only scale in one direction. 我意识到这已经以多种形式被问过很多次, 但是大多数解决方案似乎并不关心最终的图像高度,或者只在一个方向上缩放。 This:
这个:
min-width: 100%;
height: auto;
isn't a solution.不是解决方案。
I'm trying to fit an image to the height and width so that it can be dynamically injected into a number of places in different systems and sites, so I don't necessarily know what the parent object is going to be - might be a div with or without overflow set, or ap, or the body - or its dimensions;我正在尝试使图像适合高度和宽度,以便它可以动态注入到不同系统和站点中的多个位置,所以我不一定知道父 object 将是什么 - 可能是div 有或没有溢出集,或 ap,或主体 - 或其尺寸; The parent container mustn't change size just by injecting my image/script.. jQuery is NOT available.
父容器不能仅仅通过注入我的图像/脚本来改变大小。jQuery 不可用。
I can't see how the css3 background technique would work.我看不出 css3 后台技术是如何工作的。
Proportional scaling is as easy as using a ratio:比例缩放就像使用比率一样简单:
<img onload="scale(this)" src="screenshot.png">
<script type="text/javascript">
function scale(img){
var p = img.parentNode,
x = p.offsetWidth,
y = p.offsetHeight,
w = img.naturalWidth,
h = img.naturalHeight;
ratio = h / w;
if (h >= y) {
h = y;
w = h / ratio;
img.style.width = w + "px";
img.style.height = h + "px";
} else if(w >= x) { //} && ratio <= 1){
w = x;
h = w * ratio;
img.style.width = w + "px";
img.style.height = h + "px";
}
}
</script>
but this only scales in one plane - I need it to continue to scale both width and height until it fits into the parent container space neatly in both dimensions.但这只能在一个平面上缩放 - 我需要它继续缩放宽度和高度,直到它在两个维度上都整齐地适合父容器空间。 If the image is smaller than the parent container, it should scale UP to fill proportionally.
如果图像小于父容器,则应按比例放大以填充。
100%;
100%;
height and width; src
with a transparent pixel and set it's background to the actual src
. src
替换为透明像素 ,并将其背景设置为实际的src
。 background-size
on your (now) full-sized image: background-size
: contain
(image will cover the parent completely) contain
(图像将完全覆盖父级)
cover
(image will respect image proportions instead) cover
(图像将代替图像比例)
contain
contain
示例 function scale( img ) { if(img.isScaled) return; img.style.background="no-repeat url("+ img.src +") 50%"; img.style.backgroundSize="contain"; // Use "contain", "cover" or a % value img.style.width="100%"; img.style.height="100%"; img.isScaled=true; // Prevent triggering another onload on src change img.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; }
<div style="width:300px; height:300px; background:#000; margin:10px;"> <img onload="scale(this);" src="//placehold.it/1200x600/f0f"> </div> <div style="width:300px; height:300px; background:#000; margin:10px;"> <img onload="scale(this);" src="//placehold.it/400x600/cf5"> </div>
Tested in: FF, CH, E, IE(11), SA 经过测试:FF,CH,E,IE(11),SA
NB: The transparent pixel data is used solely to prevent the browser's Missing Iimage Icon that would be otherwise caused by doing img.src = "";
注意: 透明像素数据仅用于防止浏览器的缺少Iimage图标 ,否则会因执行
img.src = "";
而引起img.src = "";
http://caniuse.com/#search=background-size http://caniuse.com/#search=background-size
I used this code to fit a video to its parent: 我使用以下代码将视频适合其父级:
var parent = vid.parentNode,
vw = vid.videoWidth,
vh = vid.videoHeight,
vr = vh / vw, // video ratio
pw = parent.offsetWidth,
ph = parent.offsetHeight,
pr = ph / pw; // parent ratio
if(pr > vr) {
vid.style.width = 'unset';
vid.style.height = `${ph}px`;
} else {
vid.style.height = 'unset';
vid.style.width = `${pw}px`;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.