CSS图像本身的尺寸调整百分比？

109

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

问题是，我可以在不使用javascript或服务器端的情况下按一定比例调整图像大小吗？（我没有图像尺寸的直接信息）

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

html  css  image 
— 罗敏明
source
如果使用，它将占包含元素的百分比width: <number>%。我认为没有办法！
— Aniket

Answers:

111

我有两种方法给你。

方法1. 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。

方法2. 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是同一张图片。
浏览器支持说明：此方法将在所有浏览器中都可用，因为所有浏览器都支持css该方法中使用的属性。

该方法以这种方式工作：

  1. #wrap并#wrap img.fake有流量
  2. #wrap拥有overflow: hidden与内部图片（img.fake）相同的尺寸
  3. img.fake是内部唯一#wrap没有absolute定位的元素，因此不会破坏第二步
  4. #img_wrap在absolute内部定位#wrap并在尺寸上扩展到整个元素（#wrap）
  5. 第四步的结果是#img_wrap具有与图像相同的尺寸。
  6. 通过设置width: 50%上img.normal，它的大小是50%的#img_wrap，因此50%原始图像的尺寸。
— 弗拉基米尔·斯塔科夫（Vladimir Starkov）
source
这不会将图像的大小调整为原始大小的50％，现在是img_wrap父级的50％。–
— Wesley
请参阅我更新的答案以尝试解决该问题。你怎么看？
— 韦斯利2012年
我认为应该可以使用display：none代替可见性，例如在我的代码中。在您的示例中，仍将“保留”伪造隐藏图像的空间，如果您要在其周围放置内容，则会使流程更加
— Wesley 2012年
这是不可能的，因为主要技巧是在两个嵌套和浮动标签中。
— 弗拉基米尔·斯塔科夫（Fladimir Starkov）2012年
1
该transform:scale()解决方案有一个很大的问题。它不能与CSS盒子模型很好地交互。我的意思是，这与它没有任何接触都等你拿布局看起来都错了。请参阅：jsfiddle.net/kahen/sGEkt/8
— kahen
46

HTML：

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

CSS：

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

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

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

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

jsfiddle上的演示

编辑： 如trojan所述，您还可以利用新引入的CSS3内部和外部大小调整模块：

HTML：

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

CSS：

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

但是，在撰写本文时，并非所有流行的浏览器版本都支持它。

— 社区
source
@任何人如何解决不塌陷跨界？ 小提琴
— CoR 2015年
这正是我所需要的...快捷简单，谢谢。我这样使用它：HTML： <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS： img { display: inline-block; width: 15%; }
— Chnikki
对于将来的读者：正确的设置值figure是width: fit-content;现在。如今，浏览器支持也要好得多。
— Daniel Kis-Nagy
12

尝试zoom物业

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

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

-moz-transform: scale(0.5);

用于FireFox。

— 埃米尔·阿卡丁（EmirAkaydın）
source
4
没有诸如“ zoom”之类的CSS属性，除IE外，其他任何人均不支持。这是微软专有的东西，是非标准的。
— 罗布
9
不幸的是，此信息已过时。目前，Internet Explorer，Chrome和Safari浏览器均支持Zoom。FireFox和Opera还不支持它。这就是为什么我添加了编辑部分。IE是第一个支持它的人，但不是唯一的一个。
— EmirAkaydın2011年
根据此链接，Opera似乎也支持缩放。FireFox是唯一不支持的组件。fix-css.com/2011/05/css-zoom
— EmirAkaydın2011年
2
这就是为什么IE在过去8年中失去了一半的市场份额的原因。如果您不能可靠地依靠浏览器来支持某项功能，那么您将没有共同点。该规范由浏览器供应商自己编写。如果他们不会把它放在那里，那就不要依赖它，否则您将像做的那样编写多行标记。1998年还没有结束。
— 罗布
1
我不知道您是否注意到，但Internet Explorer，Chrome，Safari和Opera支持“缩放”。这证明“缩放”不是特定于供应商的。只有FireFox有所不同。所以我重复我的问题。什么是具有合适的CSS属性的干净解决方案？我的答案是最好的答案，直到有人找到合适的标准解决方案为止。
— 埃米尔·阿卡丁（EmirAkaydın）2012年
5

另一种解决方案是使用：

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

由于该src属性是必需的，因此无法验证，但是它可以工作（由于srcset不支持任何版本的IE，所以该属性除外）。

— 界面
source
2

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

<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。然后，您可以使用边距定位内容。您甚至可以使wrapper div成为内联块。

— 马特
source
2

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

因此，对于现代浏览器，只有HTML解决方案：

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

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

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

— 最大_B
source
0 
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并仅根据图像属性而不是父项调整大小。它可以使用class和id参数调整单个图像或一组图像的大小。

有关更多信息，请转到此处：https : //gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— 珍妮·瓦隆（Jenny Vallon）
source
0

这不是一个很难的方法：

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

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}
— 昵称
source
0

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

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

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

简单的HTML示例：

<figure>
    <img src="your-image@2x.png" />
</figure>

这是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%);。

— 弗洛里斯
source
-1

我认为您是对的，就我所知，纯CSS根本不可能（我不是说跨浏览器）。

编辑：

好吧，我不太喜欢我的答案，所以我有点困惑。我可能已经找到了一个有趣的主意，可能会有所帮助..也许毕竟有可能（尽管不是最漂亮的东西）：

编辑：经过测试，并且可以在Chrome，FF和IE 8＆9中工作。。在IE7中不起作用。

jsFiddle示例在这里

的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%;
}
— 卫斯理
source
您的示例不按比例调整图像大小
— 弗拉基米尔·斯塔科夫
您的方法可以通过调整窗口大小来减小图像
— Vladimir Starkov 2012年
这是因为您正在使用inline-block，这就是为什么width #img_wrap不仅取决于内部html宽度，还取决于context-container宽度的原因。
— 弗拉基米尔·斯塔科夫（Fladimir Starkov）
据我所知，display：none图像什么也不做，可以删除。还是我错过了什么？
— tremby 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.