Html CSS图像调整自身大小的百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8397049/
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
CSS image resize percentage of itself?
提问by Min Ming Lo
I am trying to resize an img with a percentage of itself. For example, I just want to shrink the image by half by resizing it to 50%. But applying width: 50%;will resize the image to be 50% of the container element (the parent element which maybe the <body>for example).
我正在尝试使用其自身的百分比来调整 img 的大小。例如，我只想通过将图像大小调整为 50% 来将其缩小一半。但是应用width: 50%;会将图像调整为容器元素的 50%（<body>例如可能是父元素）。
Question is, can I resize the image with a percentage of itself without using javascript or server side? (I have no direct information of the image size)
问题是，我可以在不使用 javascript 或服务器端的情况下以自身的百分比调整图像的大小吗？（我没有图像大小的直接信息）
I am pretty sure you cannot do this, but I just want to see whether there are intelligent CSS only solution. Thanks!
我很确定你不能这样做，但我只是想看看是否有智能 CSS 解决方案。谢谢！
回答by Vladimir Starkov
I have 2 methods for you.
我有2个方法给你。
Method 1. demo on jsFiddle
方法1. jsFiddle上的demo
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
此方法仅在 DOM 中调整图像的视觉尺寸，而不是实际尺寸，调整尺寸后的视觉状态以原始尺寸的中间为中心。
html:
html：
<img class="fake" src="example.png" />
css:
css：
img {
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}?
Browser support note:browsers statistics showed inline in css.
浏览器支持说明：浏览器统计信息显示在css.
Method 2. demo on jsFiddle
方法 2.在 jsFiddle 上演示
html:
html：
<div id="wrap">
<img class="fake" src="example.png" />
<div id="img_wrap">
<img class="normal" src="example.png" />
</div>
</div>?
css:
css：
#wrap {
overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}?
Note:img.normaland img.fakeis the same image.
Browser support note:This method will work in all browsers, because all browsers support cssproperties used in method.
注：img.normal和img.fake是同一张图。
浏览器支持说明：此方法适用于所有浏览器，因为所有浏览器都支持css方法中使用的属性。
The method works in this way:
该方法以这种方式工作：
#wrapand#wrap img.fakehave flow#wraphasoverflow: hiddenso that its dimensions are identical to inner image (img.fake)img.fakeis the only element inside#wrapwithoutabsolutepositioning so that it doesn't break the second step#img_wraphasabsolutepositioning inside#wrapand extends in size to the entire element (#wrap)- The result of the fourth step is that
#img_wraphas the same dimensions as the image. - By setting
width: 50%onimg.normal, its size is50%of#img_wrap, and therefore50%of the original image size.
#wrap并#wrap img.fake有流量#wrap具有overflow: hidden使其尺寸与内部图像相同 (img.fake)img.fake是里面唯一#wrap没有absolute定位的元素，这样它就不会破坏第二步#img_wrap在absolute内部具有定位#wrap并在大小上延伸到整个元素 (#wrap)- 第四步的结果是
#img_wrap与图像具有相同的尺寸。 - 通过设置
width: 50%上img.normal，它的大小是50%的#img_wrap，因此50%原始图像的尺寸。
回答by Min Ming Lo
HTML:
HTML：
<span>
<img src="example.png"/>
</span>
CSS:
CSS：
span {
display: inline-block;
}
img {
width: 50%;
}
This has got to be one of the simplest solutions using the container element approach.
这必须是使用容器元素方法的最简单的解决方案之一。
When using the container element approach, this question is a variation of this question. The trick is to let the container element shrinkwrap the child image, so it will have a size equal to that of the unsized image. Thus, when setting widthproperty of the image as a percentage value, the image is scaled relative to its original scale.
当使用容器元件的方法，这个问题的变化这个问题。诀窍是让容器元素收缩包裹子图像，因此它的大小将等于未调整大小的图像的大小。因此，当将width图像的属性设置为百分比值时，图像会相对于其原始比例进行缩放。
Some of the other shrinkwrapping-enabling properties and property values are: float: left/right, position: fixedand min/max-width, as mentioned in the linked question. Each has its own side-effects, but display: inline-blockwould be a safer choice. Matt has mentioned float: left/rightin his answer, but he wrongly attributed it to overflow: hidden.
其他一些启用收缩包装的属性和属性值是：float: left/right,position: fixed和min/max-width，如链接问题中所述。每个都有自己的副作用，但display: inline-block会是一个更安全的选择。马特float: left/right在他的回答中提到了，但他错误地将其归因于overflow: hidden.
Edit:As mentioned by trojan, you can also take advantage of the newly introduced CSS3 intrinsic & extrinsic sizing module:
编辑：正如 trojan 所提到的，您还可以利用新引入的CSS3 内在和外在大小调整模块：
HTML:
HTML：
<figure>
<img src="example.png"/>
</figure>
CSS:
CSS：
figure {
width: intrinsic;
}
img {
width: 50%;
}
However, not all popular browser versions support it at the time of writing.
回答by Emir Akayd?n
Try zoomproperty
试试zoom属性
<img src="..." style="zoom: 0.5" />
Edit: Apparently, FireFox doesn't support zoomproperty. You should use;
编辑：显然，FireFox 不支持zoom属性。你应该使用;
-moz-transform: scale(0.5);
for FireFox.
对于火狐。
回答by benface
Another solution is to use:
另一种解决方案是使用：
<img srcset="example.png 2x">
It won't validate because the srcattribute is required, but it works (except on any version of IE because srcsetis not supported).
它不会验证，因为该src属性是必需的，但它可以工作（在任何版本的 IE 上除外，因为srcset不受支持）。
回答by Max_B
This is a very old thread but I found it while searching for a simple solution to display retina (high res) screen capture on standard resolution display.
这是一个非常古老的线程，但我在寻找在标准分辨率显示器上显示视网膜（高分辨率）屏幕截图的简单解决方案时发现了它。
So there is an HTML only solution for modern browsers :
因此，对于现代浏览器，只有 HTML 解决方案：
<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>
This is telling the browser that the image is twice the dimension of it intended display size. The value are proportional and do not need to reflect the actual size of the image. One can use 2w 1px as well to achieve the same effect. The src attribute is only used by legacy browsers.
这告诉浏览器图像是其预期显示尺寸的两倍。该值是成比例的，不需要反映图像的实际大小。也可以使用 2w 1px 来达到相同的效果。src 属性仅用于旧版浏览器。
The nice effect of it is that it display the same size on retina or standard display, shrinking on the latter.
它的好处是它在视网膜或标准显示器上显示相同的大小，在后者上缩小。
回答by Matt
This actually is possible, and I discovered how quite by accident while designing my first large-scale responsive design site.
这实际上是可能的，我在设计我的第一个大型响应式设计网站时偶然发现了这一点。
<div class="wrapper">
<div class="box">
<img src="/logo.png" alt="">
</div>
</div>
.wrapper { position:relative; overflow:hidden; }
.box { float:left; } //Note: 'float:right' would work too
.box > img { width:50%; }
The overflow:hidden gives the wrapper height and width, despite the floating contents, without using the clearfix hack. You can then position your content using margins. You can even make the wrapper div an inline-block.
尽管浮动内容，overflow:hidden 给出了包装器的高度和宽度，而不使用 clearfix hack。然后，您可以使用边距来定位您的内容。您甚至可以使包装器 div 成为内联块。
回答by Jenny Vallon
function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
$(idOrClass+className).each(function(){
var shrunkenWidth=this.naturalWidth;
var shrunkenHeight=this.naturalHeight;
$(this).height(shrunkenWidth*percentShrinkage);
$(this).height(shrunkenHeight*percentShrinkage);
});
};
$(document).ready(function(){
'use strict';
shrinkImage(".","anyClass",.5); //CHANGE THE VALUES HERE ONLY.
});
This solution uses js and jquery and resizes based only on the image properties and not on the parent. It can resize a single image or a group based using class and id parameters.
此解决方案使用 js 和 jquery 并仅根据图像属性而不是父级来调整大小。它可以使用 class 和 id 参数调整单个图像或组的大小。
for more, go here: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5
更多信息，请访问：https: //gist.github.com/jennyvallon/eca68dc78c3f257c5df5
回答by nickthehero
This is a not-hard approach:
这是一个不难的方法：
<div>
<img src="sample.jpg" />
</div>
then in css:
div {
position: absolute;
}
img, div {
width: ##%;
height: ##%;
}
回答by Floris
Actually most of the answers here doesn't really scale the image to the width of itself.
实际上，这里的大多数答案并没有真正将图像缩放到自身的宽度。
We need to have a width and height of auto on the imgelement itself so we can start with it's original size.
我们需要在img元素本身上有一个 auto 的宽度和高度，以便我们可以从它的原始大小开始。
After that a container element can scale the image for us.
之后，容器元素可以为我们缩放图像。
Simple HTML example:
简单的 HTML 示例：
<figure>
<img src="[email protected]" />
</figure>
And here are the CSS rules. I use an absolute container in this case:
这是 CSS 规则。在这种情况下，我使用绝对容器：
figure {
position: absolute;
left: 0;
top: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
transform-origin: left;
}
figure img {
width: auto;
height: auto;
}
You could tweak the image positioning with rules like transform: translate(0%, -50%);.
您可以使用类似的规则调整图像定位transform: translate(0%, -50%);。
回答by Wesley
I think you are right, it's just not possible with pure CSS as far as I know (not cross-browser I mean).
我认为你是对的，据我所知，纯 CSS 是不可能的（不是跨浏览器）。
Edit:
编辑：
Ok I didn't like my answer very much so I puzzled a little. I might have found an interesting idea which could help out.. maybe it IS possible after all (although not the prettiest thing ever):
好吧，我不太喜欢我的回答，所以我有点困惑。我可能发现了一个有趣的想法，可以提供帮助..也许毕竟是可能的（虽然不是有史以来最漂亮的东西）：
Edit: Tested and working in Chrome, FF and IE 8&9. . It doesn't work in IE7.
编辑：在 Chrome、FF 和 IE 8&9 中测试和工作。. 它在 IE7 中不起作用。
html:
html：
<div id="img_wrap">
<img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
<div id="rescaled_img_wrap">
<img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
</div>
</div>
css:
css：
#img_wrap {
display: inline-block;
position:relative;
}
#rescaled_img_wrap {
width: 50%;
}
#original_img {
display: none;
}
#rescaled_img {
width: 100%;
height: 100%;
}
