CSS图像调整自身的百分比？答案

【问题标题】：CSS image resize percentage of itself?CSS图像调整自身的百分比？
【发布时间】：2012-01-13 21:15:58
【问题描述】：

我正在尝试使用其自身的百分比来调整 img 的大小。例如，我只想通过将图像大小调整为 50% 来将图像缩小一半。但是应用width: 50%; 会将图像的大小调整为容器元素的50%（例如，可能是<body> 的父元素）。

问题是，我可以在不使用 javascript 或服务器端的情况下调整图像自身的百分比吗？（我没有图像大小的直接信息）

我很确定你不能这样做，但我只是想看看是否有智能 CSS 解决方案。谢谢！

【问题讨论】：

如果你使用width: <number>%，它将占据包含元素的百分比。我不认为有办法做到这一点！

标签： html css image

【解决方案1】：

请注意，此答案已有 10 多年的历史且已过时。

试试zoom属性

<img src="..." style="zoom: 0.5" />

编辑：显然，FireFox 不支持 zoom 属性。你应该使用;

-moz-transform: scale(0.5);

对于火狐。

【讨论】：

没有像“缩放”这样的 CSS 属性，除了 IE 之外其他人都不支持。这是 Microsoft 专有的东西，非标准。
很遗憾，此信息已过时。目前 Internet Explorer、Chrome 和 Safari 浏览器都支持 Zoom。 FireFox 和 Opera 还不支持它。这就是我添加编辑部分的原因。 IE 是第一个支持它的，但不是唯一的。
根据这个链接，Opera 似乎也支持缩放。 FireFox 是唯一不支持的。 fix-css.com/2011/05/css-zoom
这就是 IE 在过去 8 年中失去了一半市场份额的原因。如果您不能可靠地依靠浏览器来支持某些东西，那么您就没有共同点。该规范是由浏览器供应商自己编写的。如果他们不把它放在那里，那么不要依赖它，否则你会像以前那样编写多行标记。这不再是 1998 年了。
我不知道您是否注意到，但 Internet Explorer、Chrome、Safari 和 Opera 都支持“缩放”。这证明“缩放”不是特定于供应商的。只有 FireFox 不同。所以我重复我的问题。具有可兼容 CSS 属性的干净解决方案是什么？在有人找到合适的标准解决方案之前，我的答案是最好的答案。

【解决方案2】：

实际上这里的大多数答案并没有真正将图像缩放到本身的宽度。

我们需要在 img 元素本身上设置 auto 的宽度和高度，以便我们可以从它的原始大小开始。

之后，容器元素可以为我们缩放图像。

简单的 HTML 示例：

<div style="position: relative;">
    <figure>
       <img src="your-image@2x.png" />
    </figure>
</div>

这里是 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;
}

您可以使用 transform: translate(0%, -50%); 之类的规则调整图像位置。

【讨论】：

position: absolute 会破坏任何布局，所以这不是一个可行的解决方案
我更新了答案。它需要在一个具有相对位置的容器中，然后它应该可以工作。绝对位置没有任何问题。这只是定位元素的另一种方式。
它确实通过将目标元素从正常流程中取出来破坏布局。此外，尽管内容已调整大小，但图像仍占用原始空间。参见示例：jsfiddle.net/afilina/o1j6s8L5
幸好你不固执。无论如何，我在这里有一个生产中的工作示例，请查看该网站的客户端徽标：ditisdeessentie.nl - 所以可以这样做。
我把你的答案放在一个 JSFiddle 中，布局被破坏了。如果有什么可以解决的，那么它应该是上述答案的一部分。目前的答案是不完整的。

【解决方案3】：

虽然它没有直接回答问题，但缩放图像的一种方法是相对于视口的大小（尤其是宽度），这主要是响应式设计的用例。不需要包装器元素。

img {
    width: 50vw;
}

&lt;img src="" /&gt;

【讨论】：

【解决方案4】：

我有两种方法给你。

方法一。demo on jsFiddle

此方法仅在 DOM 中调整图像大小而不是实际尺寸，并且调整后的视觉状态以原始大小的中间为中心。

html：

<img class="fake" src="example.png" />

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');
}

浏览器支持说明：浏览器统计信息显示在 css 中。

方法二。demo on jsFiddle

html：

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

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%;
}

注意： img.normal 和 img.fake 是同一张图片。
浏览器支持说明： em> 该方法适用于所有浏览器，因为所有浏览器都支持方法中使用的css 属性。

该方法是这样工作的：

#wrap和#wrap img.fake有流量
#wrap 具有 overflow: hidden，因此其尺寸与内部图像相同 (img.fake)
img.fake 是 #wrap 内部唯一没有 absolute 定位的元素，这样它就不会破坏第二步
#img_wrap 在 #wrap 内部有 absolute 定位，并在大小上扩展到整个元素 (#wrap)
第四步的结果是#img_wrap与图片的尺寸相同。
通过在img.normal 上设置width: 50%，其大小为#img_wrap 的50%，因此为原始图像大小的50%。

【讨论】：

这不会将图像调整为原始大小的 50%，它现在是 img_wrap 父级的 50%..
查看我的更新答案以尝试解决问题。你怎么看？
我认为应该可以使用 display:none 代替可见性，就像在我的代码中一样。在您的示例中，假隐藏图像的空间仍然是“保留的”，如果您将内容放在它周围，则会破坏流程
这是不可能的，因为主要技巧在于两个嵌套和浮动标签。
transform:scale() 解决方案有一个大问题。它不能与 CSS 盒子模型很好地交互。我的意思是它根本不与它交互，所以你得到的布局看起来全错了。见：jsfiddle.net/kahen/sGEkt/8

【解决方案5】：

这是一个不难的方法：

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

【讨论】：

这使它成为其容器的百分比，而不是其自身的大小。

【解决方案6】：

这是一个非常古老的线程，但我在寻找在标准分辨率显示器上显示视网膜（高分辨率）屏幕捕获的简单解决方案时发现了它。

所以对于现代浏览器来说，只有 HTML 的解决方案：

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

这告诉浏览器图像的尺寸是其预期显示尺寸的两倍。该值是成比例的，不需要反映图像的实际大小。也可以使用 2w 1px 来达到相同的效果。 src 属性仅由旧版浏览器使用。

它的好处是它在视网膜或标准显示器上显示相同的尺寸，在后者上缩小。

【讨论】：

【解决方案7】：

另一种解决方案是使用：

<img srcset="example.png 2x">

它不会验证，因为src 属性是必需的，但它可以工作（在任何版本的 IE 上除外，因为不支持srcset）。

【讨论】：

@min-ming-lo 接受的答案可以改为这个，因为另一个在布局中引入了问题。

【解决方案8】：

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. 
});

此解决方案使用 js 和 jquery 并仅基于图像属性而不是父级调整大小。它可以使用类和 id 参数调整单个图像或组的大小。

更多信息，请访问：https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

【讨论】：

【解决方案9】：

HTML：

<span>
    <img src="example.png"/>
</span>

CSS：

span {
    display: inline-block;
}
img {
    width: 50%;
}

这必须是使用容器元素方法的最简单的解决方案之一。

当使用容器元素方法时，这个问题是this question 的变体。诀窍是让容器元素收缩包裹子图像，因此它的大小等于未调整大小的图像的大小。因此，当将图像的width 属性设置为百分比值时，图像会相对于其原始比例进行缩放。

其他一些支持收缩包装的属性和属性值是：float: left/right、position: fixed 和 min/max-width，如链接问题中所述。每个都有自己的副作用，但display: inline-block 将是一个更安全的选择。马特在回答中提到了float: left/right，但他错误地将其归因于overflow: hidden。

Demo on jsfiddle

编辑：As mentioned by trojan，您还可以利用新引入的CSS3 intrinsic & extrinsic sizing module：

HTML：

<figure>
    <img src="example.png"/>
</figure>

CSS：

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

【讨论】：

@Anyone 如何解决不折叠跨度边界的问题？ fiddle
这正是我所需要的……快速简单的东西，谢谢。我这样使用它： HTML：<img src="https://www.google.com/images/srpr/logo11w.png"/> CSS：img { display: inline-block; width: 15%; }
对于未来的读者：截至目前，在 figure 上设置的正确值是 width: fit-content;。今天的浏览器支持也好多了。
你的意思是max-content?

【解决方案10】：

这实际上是可能的，我在设计我的第一个大型响应式设计网站时偶然发现了这一点。

<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%; }

overflow:hidden 给出了包装器的高度和宽度，尽管内容是浮动的，但没有使用 clearfix hack。然后，您可以使用边距定位您的内容。您甚至可以将包装器 div 设为内联块。

【讨论】：

【解决方案11】：

我认为你是对的，据我所知，纯 CSS 是不可能的（我的意思不是跨浏览器）。

编辑：

好吧，我不太喜欢我的回答，所以我有点困惑。我可能找到了一个有趣的想法，可以提供帮助。也许毕竟是可能的（虽然不是最漂亮的东西）：

编辑：在 Chrome、FF 和 IE 8&9 中测试和工作。 .它在 IE7 中不起作用。

jsFiddle example here

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:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

【讨论】：

您的示例不按比例调整图像大小
您的方法可以通过调整窗口大小来缩小图像
因为你使用的是inline-block，所以#img_wrap的宽度不仅取决于内部html宽度，还取决于上下文容器宽度。
据我所知，该 display:none 图像什么都不做，可以删除。还是我错过了什么？