html - 使用 Bootstrap 的 Grid img 响应问题

Question

我想制作一个响应式产品库，每行包含 4 个产品 + 描述。但在某些行中，我只想添加普通图像而不是产品。我希望这张图片与产品 + 描述的尺寸相同，并且具有相同的响应行为。

  /*      css try & sample code start     */

p,
h1,
h2,
h2,
h3,
h4,
h5 {
  font-family: 'Lato', sans-serif;
}


/*      CSS TRY & SAMPLE CODE START    */


/*      CSS TRY & SAMPLE CODE END   */

.image-wrapperz {
  padding: 5px;
  background-color: #f7f7f7;
}

.full-width-rowz {
  margin: 0px;
  padding: 0px;
}

.product-banner {
  padding-bottom: 24.1%;
  height: 0;
  background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/header_produkte_industrial_design_vintage.jpg?1189377630106933417');
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin-bottom: 5px;
}

.product-banner .cta-content {
  position: absolute;
  width: 60%;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  text-align: center;
  color: #434;
  padding-left: 5%;
  padding-right: 5%;
}

.product-banner .cta-content .subtitle {
  font-family: Lato, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  text-transform: uppercase;
}

.product-banner .cta-content .maintitle {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 500;
  text-align: center;
}

.subtitle {
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 5px;
  font-weight: 600;
}

.maintitle {
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 10px;
  padding-left 25px;
  padding-right: 25px;
}

.product-box {
  margin: auto;
  padding: 5px;
}

.product-box img {
  width: 100%;
}

@media screen and (min-width: 969px) {
  .product-banner {
    padding-bottom: 24.1%;
    height: 0;
    background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/header_produkte_industrial_design_vintage.jpg?1189377630106933417');
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 5px;
  }
  .product-banner .cta-content {
    position: absolute;
    width: 50%;
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
    text-align: center;
    color: #434;
    padding-left: 5%;
    padding-right: 5%;
  }
  .product-banner .cta-content .subtitle {
    font-family: Lato, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    text-transform: uppercase;
  }
  .product-banner .cta-content .maintitle {
    display: block;
    font-family: Lato, sans-serif;
    font-weight: 500;
    text-align: center;
  }
  .subtitle {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 600;
  }
  .maintitle {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
  }
  .product-box {
    margin: auto;
    padding: 5px;
    background-colosr: #e3e4e8;
  }
  .product-box img {
    width: 100%;
  }
  .cta-content-box {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 25px;
    padding-bottom: 10px;
    text-align: center;
    line-height: 17px;
    background-color: #e3e4e8;
    position: relative;
    top: -3px;
  }
  .subtitle-box {
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 0px;
    font-weight: 600;
    text-align: right;
  }
  .maintitle-box {
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 0px;
    text-align: right;
    position: relative;
  }
  .product-banner .cta-content-box {
    position: absolute;
    width: 100%;
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
    text-align: right;
    color: #434;
  }
  .cta-content-box-2 img {
    width: 100%;
    height: 500px;
    background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/holz_oberflache.jpg?7600284646506761685');
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 5px;
  }
  .psroduct-box-2 {
    width: 100%;
    height: 500px;
    background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/holz_oberflache.jpg?7600284646506761685');
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 5px;
  }

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="image_hover_own.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
<!--   HTML TRY & SAMPLE CODE START   -->
<div class="row col-sm-12 full-width-rowz">
  <div class="product-banner">
    <div class="cta-content" style="display: block;">
      <span class="subtitle">Alle Produkte</span>
      <span class="maintitle">Hinter jedem unserer rustikalen Freunde, stecken unzählige Designstunden und jede Menge Fleiß. All unsere Produkte wurden bis ins kleinste Detail überdacht und bestechen durch exklusive Materialien, metallische Akzente, klare Linien und minimalistische Formen.</span>
    </div>
  </div>
</div>
      
<div class="image-wrapperz">
  <div class="row col-sm-3 full-width-rowz product-box abstand-links">
    <img src="https://cdn.shopify.com/s/files/1/1867/9985/files/freund_freind_dreier_manufaktur_berlin_moebel.jpg?7600284646506761685" alt="">
    <div class="row">
      <div class="col-lg-12">
        <div class="cta-content-box" style="display: block;">
      	  <span class="subtitle-box">Freund + Feind <br></span><span class="maintitle-box">€185.00 <br> Oberfläche: GOTS Bio-Baumwolle in Farbe: Marineblau
</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row col-sm-3 full-width-rowz product-box abstand-links">
    <img src="https://cdn.shopify.com/s/files/1/1867/9985/files/freund_freind_dreier_manufaktur_berlin_moebel.jpg?7600284646506761685" alt="">
    <div class="row">
      <div class="col-lg-12">
        <div class="cta-content-box" style="display: block;">
      	  <span class="subtitle-box">Freund + Feind <br> </span>
      	  <span class="maintitle-box">€185.00 <br> Oberfläche: GOTS Bio-Baumwolle in Farbe: Marineblau
</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row col-sm-3 full-width-rowz product-box">
      <img src="https://cdn.shopify.com/s/files/1/1867/9985/files/holz_oberflache.jpg?7600284646506761685" alt="">
  </div>
</div>
<div class="row col-sm-3 full-width-rowz product-box abstand-links">
  <img src="https://cdn.shopify.com/s/files/1/1867/9985/files/freund_freind_dreier_manufaktur_berlin_moebel.jpg?7600284646506761685" alt="">
  <div class="row">
    <div class="col-lg-12">
      <div class="cta-content-box" style="display: block;">
      	<span class="subtitle-box">Freund + Feind <br> </span>
      	<span class="maintitle-box"><strong>€185.00</strong> <br> Oberfläche: GOTS Bio-Baumwolle in Farbe: Marineblau
</span>
      </div>
    </div>
  </div>
</div>
<!--   HTML TRY & SAMPLE CODE END   --> 
<!--   SCRIPT JQUERY & JAVASCRIPT START   -->           
 <script
  src="https://code.jquery.com/jquery-3.2.0.js"
  integrity="sha256-wPFJNIFlVY49B+CuAIrDr932XSb6Jk3J1M22M3E2ylQ="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<!--   SCRIPT JQUERY & JAVASCRIPT END   -->

感谢您的帮助!! <3

Answer 1

由于您的描述将覆盖图像，因此您主要关心的是确保每张图像具有相同的纵横比。

使用比例由您决定。判断图像是否具有相同纵横比的方法是将宽度除以高度(或高度除以宽度，只需确保在比较时使用相同的方法)。如果得到相同的数字，则纵横比相同。

最简单的做法是确保所有图片都具有相同的尺寸。不过，这可能涉及一些裁剪。

现在您可能会发现自己可能会使用不同尺寸的图像，但需要保持宽高比。以下尺寸的纵横比均为 3:4，用小数表示时为 0.75 (3/4 = 0.75)。

• 300 x 400 - 300/400 = 0.75
• 375 x 500 - 375/500 = 0.75
• 705 x 940 - 705/940 = 0.75

在此示例中，我使用响应式图像类来调整图像大小，它只允许图像按比例放大和缩小其自然分辨率。因此，请确保您的图像足够大以填充它的容器元素。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <img class="img-responsive" src="http://placehold.it/600x800/fc0">
    </div>
    <div class="col-sm-3">
      <img class="img-responsive" src="http://placehold.it/750x1000/fc0">
    </div>
    <div class="col-sm-3">
      <img class="img-responsive" src="http://placehold.it/675x900/fc0">
    </div>
    <div class="col-sm-3">
      <img class="img-responsive" src="http://placehold.it/1050x1400/fc0">
    </div>
  </div>
</div>

您也可以使用背景图片来做到这一点。您为 padding-bottom 使用百分比值，该百分比值将匹配图像高度的比率值。这里是 133.3333%，我们的比例是 3:4 但这并没有得到我们想要的高度，所以我们将高度除以宽度，4/3 = 1.3333。

虽然我个人会使用 img 标签。您不必管理 HTML 和 CSS 文件中的一堆 CSS 选择器。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.product-img {
  padding-bottom: 133.33333%; /* <= height / width */
  background-size: cover;
}

.product-1 {
  background-image: url('http://placehold.it/600x800/fc0');
}

.product-2 {
  background-image: url('http://placehold.it/750x1000/fc0');
}

.product-3 {
  background-image: url('http://placehold.it/675x900/fc0');
}

.product-4 {
  background-image: url('http://placehold.it/1050x1400/fc0');
}

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="product-img product-1"></div>
    </div>
    <div class="col-sm-3">
      <div class="product-img product-2"></div>
    </div>
    <div class="col-sm-3">
      <div class="product-img product-3"></div>
    </div>
    <div class="col-sm-3">
      <div class="product-img product-4"></div>
    </div>
  </div>
</div>