使用Bootstrap进行网格img响应问题

时间：2017-04-04 14:57:46

标签： 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   -->

感谢您的帮助！ ＆LT; 3

3 个答案:

答案 0 :(得分：0)

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

使用率取决于您。判断图像是否具有相同宽高比的方法是将宽度除以高度（或高度除以宽度，只需确保在比较时使用相同的方法）。如果您得到相同的数字，则具有相同的宽高比。

最简单的方法是确保所有图像具有相同的尺寸。这可能涉及一些裁剪。

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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
int
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

您可以使用photoshop制作白色图像，甚至可以绘制并放置所需的尺寸。这将是一个解决方案。

相关问题
最新问题