css如何让图片宽高适应不拉伸 - 问答

在css中设置图片宽高适应不拉伸的方法：1.首先，创建img标签，插入图片；2.通过position属性设置fixed样式固定图片；3.使用width和height属性设置图片宽高为100%即可；

css如何让图片宽高适应不拉伸

在css中设置图片宽高适应不拉伸的方法

1.首先，在页面中创建一个img标签，并插入图片；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style></style>
</head>
<body>
 <img src="1.jpg">
</body>
</html>

2.图片添加好后，在css中使用position属性固定图片；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
img{
 position: fixed;
}
  </style>
</head>
<body>
 <img src="1.jpg">
</body>
</html>

3.最后，图片固定好后，使用width和height属性设置图片宽高为100%即可实现图片的宽高适应不拉伸；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
img{
 position: fixed;
 width: 100%;
 height: 100%;
}
  </style>
</head>
<body>
 <img src="1.jpg">
</body>
</html>

0 赞

0 踩