如何缩放滑块图像

问题描述 投票:0回答:1

我正在使用引导程序模板。我使用的模板的主页上有一个图像滑块。当我在移动视图上查看主页时,滑块图像会按比例缩小,以便照片适合移动视图。我不喜欢这样,因为它会导致图像很小。我正在寻找一种在图像上设置固定高度的方法,以便在移动设备上查看图像时,图像更大并且可以填充更多页面。这意味着在移动视图中,您会看到图像略微放大。这是从引导模板下载的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 image slider scale
1个回答
0
投票

我给您提供了一个小例子,该<当屏幕较小时如何<>。由于我没有您的html代码,因此很难仅从您的CSS中读取代码...但是也许您可以自己使用我的示例来完成代码。我已将屏幕尺寸设置为max-width: 500px。您当然可以更改它,以及heigthwidth的图像大小。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.