网页图片大小设置（CSS）

发布网友发布时间：2022-04-20 07:32

我来回答

共5个回答

热心网友时间：2024-01-17 19:09

1、首先需要新建一个HTML页面。

2、然后输入页面的标题，可以按照下方图中的进行设置。

3、然后在根据下方图片中的代码进行编辑，

4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。

5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。

6、然后在输入命令.img img{ width:100%; height:auto}，这样就完成了。

热心网友时间：2024-01-17 19:09

img {max-width: 800px; height: auto;}

代码中的max-width:800px*图片的最大宽度为800像素，而下面的hight:auto很关键，可以保证图片有正确的长宽比，不至于因为被调整宽度而变形。

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

这种css是图片自适应，不管img的父元素宽度高度如何调整，img都会等比填充，知道宽度和父元素一样。

img { width:100px; height:100px;}

这种是直接控制图片的宽和高

热心网友时间：2024-01-17 19:10

热心网友时间：2024-01-17 19:10

不用再CSS里调吧
HTML里直接都可以了
如下
<img width="***" height="***" src="***.gif" alt="****" />

也可以直接做个小的图片在放到网页里

希望有帮助..

热心网友时间：2024-01-17 19:11

js版和css版自动按比例调整图片大小方法，分别如下：
<title>javascript图片大小处理函数</title>
<script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
</script>
</head>
<body>
<img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
</body>
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>

<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com