当前位置: 首页 > 面试题库 >

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

柳刚豪
2023-03-14
问题内容

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

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

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


问题答案:

我有两种方法给你。

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

该方法以这种方式工作:

  1. #wrap#wrap img.fake有流量
  2. #wrap具有overflow: hidden使得它的尺寸是相同的内图像(img.fake
  3. img.fake是内部唯一#wrap没有absolute定位的元素,因此不会破坏第二步
  4. #img_wrapabsolute内部定位#wrap并在尺寸上扩展到整个元素(#wrap
  5. 第四步的结果是#img_wrap具有与图像相同的尺寸。
  6. 通过设置width: 50%img.normal,它的大小是50%#img_wrap,因此50%原始图像的尺寸。


 类似资料:
  • 问题内容: 我有一个固定的宽度和高度来调整图像大小。但是,我对此有一个问题,因为图像可以具有任何类型的尺寸比(可以是 垂直 或 水平 )。在这种情况下,固定的宽度和高度会引起问题。我想以更智能的方式计算 宽度和高度 。 例如,假设我定义了 width 1024px和height 768px 。我想调整垂直图像的尺寸 (高度1100px和宽度200px) 。因此,在我的情况下,它将调整为固定 大小(

  • 问题内容: 目前,我正在使用: 尽管此方法可行,但最终得到的图像大小不同(有些是纵向的,有些是横向的),但是我希望所有图像都具有精确的尺寸。也许是明智的选择? 更新: 我不介意裁剪图像的一小部分。当我说明智的耕作时,我的意思是这样的算法: 问题答案: 这是我对图像进行填充拟合的观点: 它首先使用缩略图操作将图像降低到原始范围内并保留宽高比。然后将其裁剪掉以实际填充边界的大小(因为除非原始图像为正方

  • CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度。 使用百分比设置图像的高度 这个例子演示了如何使用百分比值设置元素的高度。 使用像素值来设置元素的宽度 本例演示如何使用像素值来设置元素的宽度。 设置元素的最大高度 此示例演示如何设置元素的最大高度。 使用百分比来设置元素的最大宽度 本例

  • 问题内容: 我编写了一个应用程序,该应用程序基于固定像素位置自定义绘制paint()中的所有内容。然后我禁用了调整框架的大小,使其始终可见。 但是,现在我希望能够调整它的大小,但是我不想更改我的绘图代码。我希望我可以在所有绘制代码​​之后抓取Graphics g对象的300x300正方形并将其大小调整为JFrame当前大小,但是我不知道自己在做什么。 这里是示例代码。在此,我希望将100x100正

  • 设置4个位置的值 我们可以把4个位置(top, bottom, left 和 right)写在一个CSS属性中,也就是CSS属性的速写形式。 比如 padding 就是4个位置变体(padding-top, padding-bottm, padding-left 和 padding-right)的速写。 padding 可以一次性把所有位置设置成相同的值: blockquote{ padding:

  • 我有一个名为sampleImage的图像,我试图沿着x轴和y轴拉伸它,如下所示,当它处于横向时,它根本不起作用 然后,我在viewDidLayoutSubviews()中做了如下操作, 如果设备在中,这是有效的,但是一旦您将其旋转到并返回,所有更改都将消失。如何确保这些尺寸在旋转时保持不变?