欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何放大卡片中的圖像并減少空白空間？

CSS

我有一張有圖像的卡片，旁邊是橫幅。我用的是col-lg-8和col-lg-4。問(wèn)題是在卡片(也有padding-ri ght: 20px)和橫幅之間有太多的空白空間，就像這個(gè)截圖:ss

我想刪除所有的空白，只保留卡片和橫幅之間的右填充:20px(或右邊距)。所以我想像圖中一樣擴(kuò)展圖像的寬度(直到示例紅線)，因?yàn)槌壬珯M幅的大小是固定的，我不想調(diào)整它的大小。所以我想要放大的卡片，卡片和橫幅之間的一些空白(20像素)，然后是固定的橫幅。因此，唯一的& quot空白字符& quot卡片和橫幅之間必須是20px，以符合col-lg-8和col-lg-4中的引導(dǎo)網(wǎng)格，并且沒(méi)有其他空白。

我如何放大卡，使col-lg-8和col-lg-4保持不變？(我也試過(guò)col-lg-9，但是因?yàn)榭ㄌ笏圆惶矚g)。

我對(duì)解決方案的嘗試(看起來(lái)似乎是正確的，但事實(shí)并非如此):

WIDHT IMAGE 105%:我嘗試對(duì)卡片應(yīng)用105%的WIDHT，問(wèn)題似乎得到了解決，但是當(dāng)我縮小窗口時(shí)，卡片加入了橫幅(或重疊)，沒(méi)有留下任何填充-右側(cè)。

WIDHT列75%和25%:我嘗試改變列的寬度。我變了。col-lg-8從寬度:66.66666667%到75%。后來(lái)我變了。col-lg-4的m寬度:25%，因此總計(jì)為100%。這個(gè)問(wèn)題似乎也解決了，但是有幾個(gè)人建議我不要改變Bootstrap的列寬，并告訴我這樣做不太專業(yè)。

刪除文本-對(duì)齊:右:我試圖刪除。banner { text-align:right；}.通過(guò)這種方式，橫幅接近卡片，但在其右側(cè)(橫幅的右側(cè))產(chǎn)生了一個(gè)空白空間。我不知道這是否正確。你觀察另一個(gè)截圖

這里是CodePen上的代碼，您可以在這里進(jìn)行更好的測(cè)試。對(duì)于我上面提出的問(wèn)題，最好的解決方案是什么？提前謝謝大家！！！謝謝！

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col-12 col-md-8 col-lg-8">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-lg-4">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>

好吧，我知道你的意圖了。您希望右側(cè)的橫幅保持固定寬度，而左側(cè)的卡片填充剩余的空間。你不應(yīng)該使用列。你應(yīng)該使用flex。容器container-pc已經(jīng)是一個(gè)flex容器，所以只需刪除列類。這些列不會(huì)彎曲，但會(huì)保持成比例的寬度。列不能重疊。你用錯(cuò)了工具。

如果您要將比例從8:4更改為9:3，橫幅會(huì)溢出，因?yàn)樗贿m合列的大小。

我建議通讀Bootstrap文檔，了解如何使用Bootstrap，同時(shí)避免冗余和鏈接不必要的樣式表和JavaScript文件。你的布局在窄屏幕上反應(yīng)靈敏的一個(gè)障礙是你的圖像使用固定的尺寸。

以下示例顯示:

比率為9:3的色譜柱 刪除列類以使用容器flexbox 將Bootstrap的d-flex類應(yīng)用到容器 將d-md-flex應(yīng)用于容器，將object-fit-cover應(yīng)用于卡片背景圖像 (d-md-flex在中間斷點(diǎn)處增加了顯示:flex) (對(duì)象-適合-覆蓋保持圖像的縱橫比，并在容器收縮時(shí)剪裁邊緣，而不是擠壓圖像)

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet">
  <title>Bootstrap Example</title>


</head>

<body>

<p class="text-center mt-4 mb-1">d-md-flex &amp; object-fit-cover classes</p>
  <div class="container-pc d-md-flex">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1 object-fit-cover" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

<p class="text-center mt-4 mb-1">d-flex class</p>
  <div class="container-pc d-flex">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

<p class="text-center mt-4 mb-1">Without column classes</p>
  <div class="container-pc">
    <div class="container-primapagina">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>


<p class="text-center mt-4 mb-1">Columns 9:3</p>
  <div class="container-pc">
    <div class="container-primapagina col-12 col-md-9 col-lg-9">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>
    <div class="banner col-lg-3">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>

從代碼、截圖和評(píng)論來(lái)看，這似乎就是你要找的東西。因?yàn)閳D像被設(shè)置為覆蓋在卡片的背景中，所以與你的網(wǎng)格的列相匹配會(huì)更干凈一些。

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

.image-bground {
  background-image: url("https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg");
  background-attachment: fixed;
  margin-right:20px;

<link  rel="stylesheet" />
<div class="container-pc">

  <div class="container-primapagina col-12 col-md-8 col-lg-8 image-bground">
    <div class="card text-bg-dark">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
      </div>
    </div>
  </div>

  <div class="banner col-lg-4">
    <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
  </div>
</div>

<div class="container-pc">
  <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
  <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
</div>

嘗試對(duì)div使用col和col-auto。見(jiàn)下文

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}

.banner {
  text-align: right;
}

.height1 {
  height: 450px;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-12 col-md-auto">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col" style="background-color: aqua;" ;>Col (Utility only for measuring)</div>
    <div class="col-12 col-md-auto" style="background-color: rgb(81, 255, 0);" ;>Col-md-auto (Utility only for measuring) [will take 100% width for devices smaller than `md-width(&lt;740px)`]
    </div>

</body>

</html>

@media (min-width: 992px) {
  .container-pc {
    display: flex;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 992px) {
  .container-primapagina {
    padding-right: 20px;
  }
}



.height1 {
  height: 450px;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>

  <div class="container-pc">

    <div class="container-primapagina col-12 col-md-8 col-lg-8">
      <div class="card text-bg-dark">
        <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="card-img height1" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
        </div>
      </div>
    </div>

    <div class="banner col-lg-4">
      <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner">
    </div>
  </div>

  <div class="container-pc">
    <div class="col-lg-8" style="background-color: aqua;" ;>Col 8 (Utility only for measuring)</div>
    <div class="col-lg-4" style="background-color: rgb(81, 255, 0);" ;>Col 4 (Utility only for measuring)</div>
  </div>

</body>

</html>

全屏檢查輸出

老實(shí)說(shuō)，你想要達(dá)到的目標(biāo)完全可以用bootstrap來(lái)實(shí)現(xiàn)。

你必須明白bootstrap在網(wǎng)格12上工作。

你直接使用col-，它的理想遵循下面的代碼結(jié)構(gòu)。

<div class="row">
   <div class="col"></div>
   <div class="col"></div>
</div>

你可以看到我的代碼，我甚至沒(méi)有使用下面的一個(gè)css，如果你想改變?nèi)萜鞯膶挾龋憧梢栽凇Ｈ萜黝惢蛴眯骂愄鎿Q。

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <link href="style.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-9 ps-0">
        <div class="card text-bg-dark">
          <img src="https://siviaggia.it/wp-content/uploads/sites/2/2021/02/grattacieli-new-york.jpg" class="img-fluid" alt="...">
          <div class="card-img-overlay">
            <h5 class="card-title">Card title</h5>
          </div>
        </div>
      </div>
      <div class="col-md-3 pe-0">
        <img src="https://i.ibb.co/tmCY8gW/ffffffffffff.png" alt="provabanner" class="img-fluid h-100">
      </div>
    </div>
    <div class="row">
      <div class="col-md-9" style="background-color: aqua;" ;="">Col 9 (Utility only for measuring)</div>
      <div class="col-md-3" style="background-color: rgb(81, 255, 0);" ;="">Col 3 (Utility only for measuring)</div>
    </div>
  </div>
</body>

</html>