我正在使用引导程序模板。我使用的模板的主页上有一个图像滑块。当我在移动视图上查看主页时,滑块图像会按比例缩小,以便照片适合移动视图。我不喜欢这样,因为它会导致图像很小。我正在寻找一种在图像上设置固定高度的方法,以便在移动设备上查看图像时,图像更大并且可以填充更多页面。这意味着在移动视图中,您会看到图像略微放大。这是从引导模板下载的css。
@media screen and (max-width: 768px) {
.feature-left {
margin-bottom: 20px;
}
}
.owl-carousel-fullwidth .item > a {
display: block;
position: relative;
z-index: 10;
}
.owl-carousel-fullwidth .item > a {
display: block;
position: relative;
z-index: 10;
}
.owl-carousel-fullwidth .item > a:after {
z-index: 1;
content: "";
position: absolute;
width: 100%;
height: 40%;
bottom: 0;
}
我给您提供了一个小例子,该<当屏幕较小时如何<>。由于我没有您的html代码,因此很难仅从您的CSS中读取代码...但是也许您可以自己使用我的示例来完成代码。我已将屏幕尺寸设置为max-width: 500px
。您当然可以更改它,以及heigth
和width
的图像大小。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width 500px and smaller: */
@media only screen and (max-width: 500px) {
img {
height: 40px;
width: 100px;
}
}
</style>
</head>
<body>
<img src="https://wptavern.com/wp-content/uploads/2016/07/stack-overflow.png" width="300px" height="150px">
</body>
</html>