css小窗口图片不缩放 |华文新魏 css

大家可以使用CSS的background-image属性来解决这个问题。background-image是用来设置一个元素的背景图片，可以用来代替img标签。通过设置background-size属性为contain或者cover，可以控制图片的大小，但这个方法同样存在问题，因为它无法避免图片的拉伸或压缩。

.small-window {
width: 500px;
height: 500px;
border: 1px solid black;
background-image: url('image.jpg');
background-size: contain;
}

为了避免出现在background-size属性下的图片不显示全的问题，大家可以使用以下的方法：

.small-window {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.small-window:before {
content: '';
display: block;
margin-top: 100%;
}
.small-window img {
position: absolute;
width: auto;
height: 100%;
top: 0;
left: 0;
}

这段代码中，大家通过伪元素:before来撑满容器的高度，使得小窗口在不设置大小的情况下自适应图片的高度，而在正常情况下，图片的宽度会根据容器的宽度来自适应。

这样，大家就不用担心图片会被拉伸或挤压了。除此之外，还有其他的方法来解决这个问题，总之，请根据自己的需求选择最适合自己的方法。