css 可以按比例缩放图片吗?

发布网友发布时间：2022-04-23 02:43

我来回答

共8个回答

热心网友时间：2022-04-06 12:07

解决这个问题的方法如下：

1、先在html里添加一个img图片标签。

2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。

3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。

4、设置后，看下页面可以看到图片现在变形了。

5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。

6、这里设置后的效果，图片并没有变形。

7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。

热心网友时间：2022-04-06 13:25

我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。
<div>
<img src="1.jpg" alt=""></div>123

备注一下这里的图片大小为200x200px
div { width: 400px; height: 400px; border: 1px solid #000; }img { width: 100%; height: 100%;}123456789

不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。
那是不是就这这么简单完事儿了呢？如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。
假如你介意图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改
img { max-width: 100%; max-height: 100%;}1234

max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。
具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。
响应式

响应式设计中：如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片，宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
我觉得响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
最后，假如你的img是作为background使用的就需要通过background-size: cover/contain又或者是具体的百分比去设置图片在容器中所占比例的大小。这里就不详细介绍了，有兴趣可以到w3school里了解下。

热心网友时间：2022-04-06 15:00

设置对应图片的width和htight的具体数值就可以了。举例一个：

img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}

这样设置图片的话，可以使图片在指定的空间内缩放。

举例：

根据上面4个css可以知道：

图片被缩放后在div的尺寸是：

width:50px;（因为图片的width:100%）

height:50px（这里height是在width:100%被缩放后的尺寸。）

我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height

这个时候，max-height:100%;就会发挥作用，

在max-height:100%;的作用下，图片被缩放后在div的尺寸是：

width:40px;

height:40px;

这个尺寸符合max-height和max-width

热心网友时间：2022-04-06 16:51

可以。
用样式表固定图片的长或者宽，另一边会自动等比缩放。
img { width:100;} 或者 img { height:100px;}

热心网友时间：2022-04-06 18:59

可以的：

页面上:<div class="div"><img src="..."></div>

下面的是CSS：

.div{
   width:100px;
   height:100px;
}
.div img{
   width:100%;
   height:100%;
}

总之，我使用的是百分比。

热心网友时间：2022-04-07 00:05

可以，设定高或者宽，另一个就可以按比例缩放，保证img标签没有高宽定义，保证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

标准声明

热心网友时间：2022-04-07 03:03

大概是不可以的，要是想改的话，只能手工了！要不你就用JS。

热心网友时间：2022-04-07 06:18

设置图片的宽度为100%为百分比你想多少就多少

css三种方案实现图片宽高自适应等比例缩放

在网页设计中，当页面宽度发生变化时，例如通过浏览器的开发者工具调整窗口大小，我们希望图片能够保持等比例缩放，以保持视觉上的协调。以下有三种CSS方案可以实现这一需求。方案一：宽度百分比配合vw单位这种方法非常直观，只需设置图片的宽度为百分比，并利用vw（viewport width）单位来确保高度与宽度保持...