Question

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

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

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

Answer 1

我有2种方法。

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

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

该方法以这种方式工作：

#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%。

Answer 2

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

然而，not all popular browser versions support it at the time of writing。

Answer 3

尝试zoom属性

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

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

-moz-transform: scale(0.5);

for FireFox。

Answer 4

另一种解决方案是使用：

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

它不会验证，因为src属性是必需的，但它有效（除了IE的任何版本，因为不支持srcset）。

Answer 5

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

<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成为内联块。

Answer 6

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

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

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

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

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

Answer 7

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

Answer 8

这是一个不太难的方法：

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

then in css:
div {
    position: absolute;
}

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

Answer 9

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

我们需要在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%);之类的规则来调整图像的位置。

Answer 10

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

img {
    width: 50vw;
}

<img src="" />

Answer 11

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

编辑：

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

编辑：在Chrome，FF和IE 8＆amp; 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%;
}

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

11 个答案:

方法1. demo on jsFiddle

方法2. demo on jsFiddle

该方法以这种方式工作：