文章/答案/技术大牛

发布

社区首页 >问答首页 >当屏幕尺寸较小时，引导删除图形的填充或边距。

问当屏幕尺寸较小时，引导删除图形的填充或边距。
EN

Stack Overflow用户

提问于 2021-12-14 18:47:26

回答 3查看 213关注 0票数 0

我试图有一个图像覆盖整个屏幕(没有边距或填充)的小型设备。不幸的是，on this post提出的技术对我没有用。

这是我目前的代码。(在https://jsfiddle.net/上测试)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


</head>
<body>
  <div class="container-fluid bg-primary">
  <div class="row">
  <div class="col-md-9">
  <div class="image-wraper">
    <figure class="figure">
            <img
                src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"
                class="figure-img img-fluid rounded shadow-3 mb-1"
                alt="Taking up Water with a Spoon"
                style="height: 100%; width: 100%; object-fit: cover;"
            />
            <figcaption class=" figure-caption">A caption for the above image.</figcaption>
        </figure>
  </div>
    
  </div>
  <div class="col-md-3">
    ... 
  </div>
  </div>
        
</div>
</body>
</html>

左边和右边仍有空白处。如何在屏幕上删除小于或等于sm的？

html

css

bootstrap-4

回答 3

Stack Overflow用户

发布于 2021-12-14 18:57:11

图片完全填充屏幕，但由于高宽比不完全匹配屏幕的高宽比，我得到了以下结果。我也应用了我自己的风格，取消了引导链接。你能测试一下吗？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        body{
            margin: 0px !important;
        }

        img {
            position: absolute;
            width: 100%;
        }

        .img-fluid {
            max-width: 100%;
            height: auto;
        }

        .figure-style {
            margin: 0px !important;
        }
    </style>
</head>

<body>
    <div class="row align-items-center">
        <div class="col-lg-12">
            <figure class="figure-style">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img%20(73).jpg"/>
            </figure>
        </div>
    </div>
</body>
</html>

应用程序测试映像如下所示：

票数 1

Stack Overflow用户

发布于 2021-12-14 19:29:15

如果您的图像具有适合于引导5中浏览器屏幕的高宽比，则可以应用以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </style>
</head>

<body>
    <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg" class="img-fluid" alt="Wild Landscape" />
</body>
</html>

票数 0

Stack Overflow用户

发布于 2021-12-16 12:18:28

使用媒体查询，在默认情况下，Bootstrap会在480 at处调整到主体、容器和导航条的边距/填充。

@media(max - width: 480 px) {
   ...
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70354116

复制

相似问题

问当屏幕尺寸较小时，引导删除图形的填充或边距。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当屏幕尺寸较小时，引导删除图形的填充或边距。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当屏幕尺寸较小时，引导删除图形的填充或边距。
EN