css怎么让图片缩小?

在进行布局时都要求图片等比例缩,而且要求图片不失真,不变形。但是有的图片太大就会撑开网页,造成错位,下面我们来看一下使用css缩小图片的方法。

我们可以通过给图片的img标签设置width或者height的任意一个,图片会自动等比例缩放。我们可以设置这两个属性值小于原图片大小使图片缩小。

1、设置图片等比缩小

<html>
<head>
<style type="text/css">
.div1 {
    width:300px ; 
    height:200px;
    border:solid 1px red
}
.div1 img{
      width:50%;
}
</style>
</head>

<body>

<div class="div1"><img src="1.jpg" /></div>
<img src="1.jpg" />
</body>
</html>

效果图:

1.jpg

2、设置最大宽或高是图片缩小

<html>
<head>
<style type="text/css">
.div1 {
    width:300px ; 
    height:200px;
    border:solid 1px red
}
.div1 img{
      width:100px;
}
</style>
</head>

<body>

<div class="div1"><img src="img/3.jpg" /></div>
<div>
<img src="img/3.jpg" /><div>
</body>
</html>

效果图:

2.jpg

以上就是css怎么让图片缩小?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏