使用Bootstrap的Grid img响应性问题

Question

I want to make a responsive product gallery with 4 products + description for each row. But in some Rows, I want to add just a plain image instead of a product. I want this picture to be the same size as the products + description and have the same responsive behavior.

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

Thanks for your help!! <3

Answer 1

Since your description is going to overlay the images, your main concern will be to ensure that each image has the same aspect ratio.

The ratio to use is up to you. The way to tell if images have the same aspect ratio is to divide the width by the height (or height by width, just make sure you use the same approach when comparing). If you get the same number, you have the same aspect ratio.

The simplest thing to do would be to make sure all images have the same dimensions. This might involve some cropping though.

Now you might find yourself in a situation where you might use different size images but need to keep aspect ratio. The following dimensions all have an aspect ratio of 3:4 which is 0.75 when expressed as a decimal ( 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

In this example I'm using a responsive image class to resize the image, which only allows the image to scale up to and down from it's natural resolution. So make sure your image is large enough to fill it's container element.

 @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> 

You can also do this with background images. You use a percentage value for padding-bottom that will match the ratio value for the image's height. Here it's 133.3333% , our ration is 3:4 but that doesn't get us the height we want so we divide height by width, 4 / 3 = 1.3333 .

Though I would personally use img tags. You don't have to manage a bunch of CSS selectors in the HTML and CSS files.

 @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> 

Answer 2

  <meta charset="UTF-8"> <title>Product Pagea</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <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"> <style type="text/css"> /* css try & sample code start */ p, h1, h2, h2, h3, h4, h5 { font-family: 'Lato', sans-serif; } /* CSS TRY & SAMPLE CODE START */ .produkt-img { padding-bottom: 133.33333%; /* <= height / width */ background-size: cover; } .produkt-1 { background-image: url('Images/x_freund_faserland_vierer_manufaktur_berlin_moebel.jpg'); } .produkt-2 { background-image: url('Images/x_freund_monument_dreier_manufaktur_berlin_moebel.jpg'); } .produkt-3 { background-image: url('Images/wood_fill_up.jpg'); } .produkt-4 { background-image: url('Images/x_freund_naturbursche_vierer_manufaktur_berlin_moebel.jpg'); } .produkt-box-overlay-text { width: 100%; text-align: center; position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .produkt-overlay:before{ position: absolute; content:" "; top:0; left:0; width:100%; height:100%; display: none; z-index:0; } .produkt-overlay:hover:before{ display: block; } .overlay-farbe:before { /* grauer overlay background-color: rgba(50, 50, 50, 0.05)*/ background-color: rgba(199, 87, 36, 0.1); } .col-sm-3, produkt-width { padding: 0px; margin: 0.5%; width: 23.75%; } .col-sm-3 extra-margin { margin-left:1%; } /* CSS TRY & SAMPLE CODE END */ </style> </head> <body> <!-- HTML TRY & SAMPLE CODE START --> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> <div class="produkt-img produkt-1"></div> </div> <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> <div class="produkt-img produkt-2"></div> </div> <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> <div class="produkt-img produkt-3"></div> </div> <div class="col-sm-3 col-xs-6 produkt-width produkt-overlay overlay-farbe"> <div class="produkt-img produkt-4"></div> </div> </div> </div> 

Answer 3

You can make a white image with photoshop or even paint and put the dimensions that you need. This would be a solution.