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

标签 html css image responsive

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

enter image description here

enter image description here 

  /*      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

最佳答案

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

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

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

现在您可能会发现自己可能会使用不同尺寸的图像，但需要保持宽高比。以下尺寸的纵横比均为 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>

关于html - 使用 Bootstrap 的 Grid img 响应问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43210806/

上一篇：javascript - 为什么 jQuery 事件在我使用由 jQuery 生成的类时不起作用

下一篇：html - flexbox 元素中的白线不会消失

相关文章：

css - 对于 Bootstrap 4 站点，我应该在 body 还是 main 级别添加 container-fluid

css - 将 CSS3 变换/动画与 font-face 一起使用会产生类似 "wobbly"微调器 gif 的效果

image - CFDocument 显示错误的图像

html - 叠加层未正确调整 CSS 大小

html - 将辅助文本添加到响应式图像

html - 隐藏不适合容器高度的 block

javascript - 在div中显示if else函数的结果

css - 如何在行内 block 之后删除这个空间？

javascript - 当元素被另一个元素替换时继续动画

html - 有没有工具可以获取 css 类并使它们内联？

©2024 IT工具网  联系我们