I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO
Related
I want to create a grid styled layout without using grid or flexbox. I am assuming I need float for this. One of the issues is that the images aren't' filling the entire space. Any advice on how to do this?
.container {
max-width: 90%;
margin: 0 auto;
}
.grid-item {
width: 25%;
float: left;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
I suggest using the columns rule, specifying the number of columns and a width of 1/4 of the total width for responsiveness:
columns: 4 25vh;
Thus, the template with the image is now responsive without media queries.
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item {
/*width: 25%;
float: left;*/
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
i want to show products like different gird. i think i don't know what my question but i am showing product like this image:
i tried to bootstrap but no response.
my code is :
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 2</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 2</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 3</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext">£8.95</div>
</div>
</div>
<div class="col-md-2 column productbox">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
<div class="producttitle">Product 4</div>
<div class="productprice">
<div class="pull-right">BUY</div>
<div class="pricetext"> £8.95</div>
</div>
</div>
anybody can help me?
thanks
You can achieve this using CSS3 Flexbox property. Here
is the link.
* {box-sizing: border-box}
body {margin: 0}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
display: block;
width: 100%;
margin-top: 8px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
<img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
<img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
<img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
<img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
<img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
</div>
</div>
I have the following setup:
I have an image box as a responsive square using a pseudo element :after and padding-bottom: 100%;
The issue:
I want to have a sidebar next to my box, which can contain any number of small thumbnail images. However, in default Bootstrap behavior, the smaller of the boxes gets adjusted to the bigger one. Instead, I am trying to get the sidebar to always be the same height as the main images. If it is bigger, the content should scroll vertically instead.
I have tried to achieve this using a wrapper around my sidebar, however the box still grows to its size instead.
My question:
How can I ensure the sidebar only gets the maximum height of my square box next to it?
https://jsfiddle.net/Sirence/rzx6t8ey/
.row {
margin-top: 20px;
}
.row>div {
border: solid 1px #6c757d;
padding: 10px;
}
img {
display: block;
border: 1px solid red;
}
.sidebar>div:not(:last-child) img {
margin-bottom: 10px;
}
.main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main .wrapper {
border: 1px solid green;
position: relative;
}
.main .wrapper:after {
content: "\00a0";
display: block;
padding-bottom: 100%;
line-height: 0;
}
.main .holder {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar {
height: 100%;
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-1 sidebar">
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1 sidebar">
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1 sidebar-wrapper">
<div class="sidebar">
<div class="thumbnail">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
<div>
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
<div class="col-2 main">
<div class="wrapper">
<div class="holder">
<img class="thumbnail" src="http://via.placeholder.com/20x20" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
This is definitely possible with only pure CSS. Alright, the premise of this is simple. You want for your row to always take the height of the responsive image and not the long list of thumbnails as you mentioned.
We need to tell the browser to only look at the height of the image and ignore the thumbnail list, and to do that we remove the thumbnail list from the document flow with position absolute.
I replicated your bootstrap layout, albeit more simply, and implemented what I just mentioned. I set the sidebar positioning to relative with vertical overflow to scroll. I styled it with a fixed flex width with no grow or shrink and then placed another absolute positioned container div to house the thumbnails.
I then added a second column where the main image will be. All that was left was to add the img-fluid bootstrap style to make the image responsive and voila!
Working fiddle here: Click Here
And this is the code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.container-overrides {
background: #ccc;
margin: 20px auto;
max-width: 500px !important;
}
.sidebar {
position: relative;
overflow-y: scroll;
flex: 0 0 50px;
}
.sidebar .image-container {
position: absolute;
left: 0;
right: 0;
top: 10px;
bottom: 10px;
}
.sidebar img {
display: block;
margin: 0 auto 10px;
}
.sidebar img:last-of-type {
margin: 0 auto;
}
.main{
background:#ccc;
}
.main img {
height: auto;
border: 1px solid red;
}
</style>
<div class="container p-0 container-overrides">
<div class="row no-gutters">
<!-- Responsive Sidebar -->
<div class="sidebar bg-dark p-2">
<div class="image-container">
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
<img src="http://via.placeholder.com/20x20" />
</div>
</div>
<!-- Main Image Container -->
<div class="col p-2 main">
<img src="https://ih1.redbubble.net/image.393347411.1344/flat,800x800,070,f.jpg" class="img-fluid" />
</div>
</div>
</div>
I am playing around with Bootstrap and I ran into a small problem that I can't find a solution for. There probably is a solution out there, but I can't, for the life of me, figure out what to search for.
What I want to know is, if there is a way to make the columns snap to each other, so a big gap doesn't show up like shown in the fiddle, below the first div on the left hand side. I hope the fiddle describes the problem well enough for someone to point me in the right direction.
Fiddle: https://jsfiddle.net/DTcHh/24238/
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
<div class="col-md-6 container">
<h3>Title</h3>
<p>Paragraph</p>
<div class="media-container">
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
<a href="http://placehold.it/200x200" />
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
</div>
Problem in your bootstrap grid structure. You use "container" class under "ROW" & "COL-MD-" so that's why you face the problem.
Working fiddle: https://jsfiddle.net/amitmonsterme/veyq6naL/
view this tutorial : http://getbootstrap.com/css/#overview-container
You can apply the float: right property to particular blocks when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose.
Please check the result: https://jsfiddle.net/glebkema/9dqsj4pk/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
background: tomato;
}
.container {
background: white;
border: 1px solid grey;
}
#media (min-width: 992px) {
.pull-md-right {
float: right !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Title 1</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 2</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 3</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 4</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6 pull-md-right">
<h3>Title 5</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
<div class="col-md-6">
<h3>Title 6</h3>
<p>Paragraph</p>
<div class="media-container">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/200x200">
</div>
</div>
</div>
</div>
I'm sure this is obvious but I can't figure it out. I want to create a grid of images like so:
[Image] [Image] | [ Big
[Image] [Image] | Image ]
I can do this fine with just images but the problem is that the images are nested inside links. So I'm trying to figure out how to make the links float left.
My HTML is:
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="">
</a>
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="">
</a>
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="">
</a>
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="">
</a>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="">
</a>
</div>
</div>
<div style="clear: both;">
My CSS is:
.gallery .col-md-6 a {
float: left;
display: block;
}
.gallery .col-md-6 a:nth-child(odd) {
width: 307px;
margin: 0 30px 30px 0;
}
.gallery .col-md-6 a:nth-child(even) {
width: 278px;
margin: 0;
}
The width of each col-md-6 is 585 px so they should fit together. .gallery is getting targeted correctly too, it's showing up in the code inspector. There's obviously something basic about floats that I'm not understanding.
If you're already using a grid framework (Bootstrap), why not take advantage of it. It's a little extra markup, but I think it achieves what you are looking for.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="" class="img-responsive">
</a>
</div>
</div>
Would this work for you? I have given two examples, seeing your layout. One with 4 a row and the other with 2 a row.
* {box-sizing: border-box;}
.half {width: 50%;}
.quat {width: 25%;}
.sz34 {width: 75%;}
.cols {float: left;}
img {width: 100%; height: 65px; display: block; border: 1px solid #ccc;}
.parent {overflow: hidden;}
.parent div {float: left;}
img.double-height {height: 130px;}
<div class="parent">
<div class="half">
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>
<hr />
<div class="parent">
<div class="half">
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>