img标签内的图片怎么自适应img标签的大小呢？
发布网友
发布时间：2022-04-22 06:19
共3个回答
热心网友
时间：2023-09-23 10:17
img标签语法：<img src="url" alt="some_text">
URL 指存储图像的位置，alt 属性用来为图像定义一串预备的可替换的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<title>http://www.xinbiancheng.cn</title>
</head>
<body>
<h2>html图像标签怎么使用</h2>
<img src="pic.png" alt="Pulpit rock" width="304" height="228">
</body>
</html>
如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
热心网友
时间：2023-09-23 10:17
html中img图像元素的大小默认是图片的实际大小，当更改其中一个值时，图片按比例缩放。只能在外层元素中使img元素自适应大小。
小程序中可以使用mode属性设置显示模式。
CSS3中可以使用object-fit和object-position进行自适应设置。
热心网友
时间：2023-09-23 10:17
1、图片高度小于容器高度，则容器上下会出现空白。
2、图片高度大于容器高度，则图片垂直方向会超出容器（可在容器添加overflow:hidden隐藏）
3、如果设置img {height:100%;}则以上结果相反。
4、如果同时设置宽度和高度{width:100%; height:100%;}，则图片会填充满容器，但有可能会被拉伸或压缩变形，不建议这么做。
5、在具体项目开发过程中，同一模块的图片最好用同一尺寸规格。
------------------
css裁剪模式：
对图片添加 {object-fit: cover;}，注意是图片，不是容器。
这是一种裁剪模式，图片会在短边充满容器，长边会被自动居中裁剪。
比如容器是100x100，图片是300x100，则图片最终显示结果是中心位置100x100的部分。
这应该是比较完美的自适应方法。
