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

Posted 2023-03-05

技术标签:

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

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

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

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

【问题讨论】：

如果你使用width: <number>%，它将占据包含元素的百分比。我不认为有办法做到这一点！ 【参考方案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

#wrap

absolute

#img_wrap

#wrap

absolute

#wrap

#img_wrap

img.normal

width: 50%

#img_wrap

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 ***，您还可以利用新引入的CSS3 intrinsic & extrinsic sizing module：

HTML：

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

CSS：

figure 
    width: intrinsic;

img 
    width: 50%;

但是，not all popular browser versions support it at the time of writing。

【讨论】：

@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" >
  </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 图像什么都不做，可以删除。还是我错过了什么？

以上是关于CSS图像调整自身的百分比？的主要内容，如果未能解决你的问题，请参考以下文章

如何在css中动态调整图像大小？

CSS 根据 jQuery 的宽度百分比设置高度

CSS background-size 属性详解

图像宽度百分比 [ CSS ]

imagemagick：调整大小后如何获取图像大小？

css 如何根据显示器屏幕大小自动调整显示区域