所以我试着做一个小项目，这是一个简单的网站，我只想水平调整我的图像大小。因此，它将使页面从左到右与正常高度相同。但当我尝试在CSS中使用width属性并将其设置为100%时，它并没有使我的图像变长，而是变大了。
.wide-pic{
width: 100%;
}<img class="wide-pic" src="https://www.w3schools.com/cssref/mountain.jpg">您可以给它一个静态的高度和宽度。
.wide-pic {
width: 100px;
height: 100px;
}
您可能需要添加对象拟合：cover；
在样式中使用背景大小进行播放。
#example1 {
border: 2px solid black;
padding: 25px;
background: url(https://www.w3schools.com/cssref/mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 50%;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>background-size: 100% 50%:</h2>
<div id="example1">
<h2>Hello World</h2>
<p>The size of the background image is set in percent of the parent element; 100% width and 50% height.</p>
</div>
</body>
</html>试试这个
.wide-pic{
width: 100%; //give your size
hight:100%; //give your size
max-width:100%;
}