DIV CSS 中，如何控制显示的图片大小？

Posted 2023-05-09

例如：20x20的图片，我想在网页上40x40的地方表示。
或者 40x40的图片，在20x20的地方表示，（当然是全部表示。）
该如何做呢？

如果你是用IMG标签来显示你的图片的话，可以这样分类方便自己的操作<div class="size40"><img src='图片路径' /></div><div class="size20"><img src='图片路径' /></div><style type='text/css'>.size40 imgwidth:40px; height:40px;.size20 imgwidth:20px; height:20px;</style>这样在相应的区域里面的图片无论大小是多小都会按照区域大小来限制了。如果你是用background来显示图片则不能控制图片的缩放，只能控制显示区域，对于小于40*40的20*20图片如果你只想填充的话可以加入repeat来平铺填充。 参考技术A 如果你是用IMG标签来显示你的图片的话，可以这样分类方便自己的操作.size40
imgwidth:40px;
height:40px;.size20
imgwidth:20px;
height:20px;这样在相应的区域里面的图片无论大小是多小都会按照区域大小来限制了。 参考技术B 你可以把这个大小写到css中，定义个样式如：.img width:40px;height:40px;然后在图片标签中引用就行了<img src="#" class="img" /> 参考技术C 就直接这么写<img src="" width="" height="" />图片想要显示多大，就写多大。 参考技术D 1、CSS 中控制显示的图片大小，可以直接定义在CSS中定义图片宽度width和高度height。
比如：
<style>
.pic imgwidth:40px;height:40px; /*这里直接定义了pic的图片宽度和高度*/
</style>
<div class="pic"><img src="图片.JPG"></div>
2、在网页中通过html代码直接写图片的宽度和高度。
比如：
<div class="pic"><img src="图片.JPG" width="40" height="40"></div>

为div设置背景图片后，为啥不显示背景图片？

参考技术A

没听说过div还要设置display:block,div中不需要display:block.

原因：
1、编码错误，即代码编写没有按照规范，属性名写错。

2、图片路径不对。

3、使用background来实现背景图片，可能因为图片太大或者太小，显示出来的图片只有一部分，二者一部分刚好是透明的，造成没有图片的效果，因此必须设置background-size来控制图片的显示。

4、背景图片调用方式不对，不能使用本地路径。

将hanshan.png和当前页面放在一个目录，则直接写成这样：

#cuyu
background-image: url(hanshan.png);
height: 500px;
width: 1000px;

或者将hanshan.png放在images目录，保证当前页面和images在同一级目录，则样式为：
#cuyu
background-image: url(images/hanshan.png);
height: 500px;
width: 1000px;

扩展资料：

DIV格式使用方法的注意事项：

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的特定的格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素同时应用 class 和 id 属性，但是更常见的情况是只应用其中一种。

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。

参考资料来源：百度百科-DIV