In the homepage of my website I would like to display 12 pictures, equally sized, in a 3 by 4 grid. I would like to avoid tables because in the CSS I've got 2 media queries that are "changing" the layout from 3 by 4 to 2 by 6 and to 1 by 12 when the screen is not big enough, but if there's a way to "change layout" with tables I'm totally ok with it. The issue I'm having is that when I'm displaying not 12, but 11 pictures, the last one is not centered.
The code of the first 3 divs is as follows (the other 9 are pretty much the same):
.divThumb1{
float: left;
width: 31%;
max-width: 288px;
margin: 0%;
position: relative;
margin-top: 15px;
}
.divThumb2{
margin:0 auto;
display:inline-block;
width: 31%;
max-width: 288px;
margin: 0%;
position: relative;
margin-top: 15px;
}
.divThumb3{
float: right;
width: 31%;
max-width: 288px;
margin: 0%;
position: relative;
margin-top: 15px;
}
Any suggestions? Please let me know if you need more infos!
If you want to achieve such responsive layout, you may want to look into using the grid layout offered in a popular CSS framework named Bootstrap: http://getbootstrap.com/css/#grid-options
Once you included Bootstrap, using something like:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
...
</div>
should allow you achieve your purpose without customizing each div manually. Be sure to look into .col-xs-, .col-sm-, .col-md-, and .col-lg- as well. They are well documented.
Hope that helps.
Here's a responsive image grid with a maximum width. All images are centered. I hope you find it useful!
.imageGrid {
display: block;
margin: 0 auto;
max-width: 800px;
text-align: center;
font-size: 0;
line-height: 0;
}
.imageGrid * {
font-size: 16px;
line-height: 21px;
}
.imageGrid > img {
display: inline-block;
width: 31%;
margin: 1%;
background-color: gray;
}
<div class="imageGrid">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
</div>
Related
I set out to create a float based grid system and have added gutters between columns via padding: 0 0.75em; applied to columns with margin-right: -0.75em; and margin-left: -0.75; applied to rows.
When I have a full width container it renders outside the width of the viewport with the horizontal scrollbarr showing.
I want the leftmost and the rightmost element to stick along the edges of the viewport, but still want to preserve the gutters between elements. I must be missing something. Any help would be appreciated, thank you!
Here's CSS followed by HTML:
.container-full {
width: 100%;
}
.row {
margin-right: -0.75em;
margin-left: -0.75em;
}
.row::before,
.row::after {
display: block;
content: "";
clear: both;
}
[class*="column-"] {
float: left;
padding-right: 0.75em;
padding-left: 0.75em;
}
<div class="container-full">
<div class="row">
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img01.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img02.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img03.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img04.jpg" alt="Image">
</div>
</div>
</div>
</div>
You can achieve this via using CSS Grid and the grid-gap property.
<div class="container">
<img src="https://picsum.photos/1920/1080" alt="">
<img src="https://picsum.photos/1920/1081" alt="">
<img src="https://picsum.photos/1920/1082" alt="">
<img src="https://picsum.photos/1920/1083" alt="">
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 0.75rem;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
I have a container div with multiple varying-width, uniform-height images. The images are horizontally arranged with no gaps between them.
What I have so far:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
width: 80%;
position: relative !important;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
I would like for all of the images to scale to fit within my div, filling it, but I can't seem to find where I can do this with multiple images.
I question is basically this one but with a twist of also scaling to fit.
Unless you want a gap in your box you should remove width/position from the inner #images container. To make the images scale down you can add a min-width. If you want the images to not distort add an object-fit:
#imageContainer {
width: 80%;
border: 1px solid blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#images {
display: flex;
margin: 2px;
}
#imageContainer img {
display: inline-block;
position: relative;
margin: 1px;
/* Important bits: */
min-width: 0;
object-fit: contain;
}
<div id="imageContainer">
<div id="images">
<img src="https://dummyimage.com/400x100/000/fff" alt="">
<img src="https://dummyimage.com/320x100/000/fff" alt="">
<img src="https://dummyimage.com/420x100/000/fff" alt="">
<img src="https://dummyimage.com/540x100/000/fff" alt="">
</div>
</div>
(Btw, centering using left + transform can cause blurriness in some rendering engines.)
I prefer using Bootstrap for most of my front-end styling as they provide lots of nifty "features" that make it easy for me to create a nice looking front-end without having to spend hours with CSS trying to get it looking perfect or making it scalable to multiple viewports.
Hence, here is how I would solve it using Bootstrap-4. (Here is a Codepen link)
<div class="container">
<div class="row outline-primary">
<div class="col">
<img src="https://dummyimage.com/400x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/320x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/420x100/000/fff" class="img-fluid h-100">
</div>
<div class="col">
<img src="https://dummyimage.com/540x100/000/fff" class="img-fluid h-100">
</div>
</div>
</div>
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
I'm trying to create a grid layout for my portfolio site. I'm having trouble with getting it to work online. When I try a preview in dreamweaver it look just fine, but when uploaded it's all messed up.. Please help
http://www.kaspervanvliet.nl/index.html
HTML:
<div id="images-containter">
<div class="col">
<img src="images/k_Web-03.jpg">
<img src="images/curriculum_new.jpg">
<img src="images/Finnley's_2.jpg">
<img src="images/Justme_1.jpg">
</div>
CSS:
.images-containter {
position: relative;
width: auto;
height: auto;
}
.images-containter img{
width: 350px;
height: auto;
background: #fffff;
padding: 0px;
margin: 15px;
border: none;
}
.col {
width: 350px;
display: block;
float: left;
margin: 15px;
vertical-align: top;
align: center;
}
Set a width and height on your image tags. I assume you want it to all look the same cross browser. That would be the best bet.
Your code: my changes
<div class="col">
<img src="images/k_Web-03.jpg" **height="100" width="75"**>
<img src="images/curriculum_new.jpg" **height="100" width="75"**>
<img src="images/Finnley's_2.jpg" **height="100" width="75"**>
<img src="images/Justme_1.jpg" **height="100" width="75"**>
</div>
etc...
This takes some planning on your part, but you could simply allow them to click the image and see a full view. Otherwise, you're going to have different images with different aspect ratios and it will never look as good as you want it to.
Also, please don't structure your site with tables unless you're going to be using tabular data. It's a pain to edit in the long run.
EDIT**
The below html/css will give you the desired result. There are 4 divs with the class of "cols" those 4 divs are set up to be 4 columns. The images inside the div will stack, evenly spaced above and below. Also, the height will automatically adjust based on the width being constrained to 230px.
Let me know if you need anything else.
<!doctype html>
<html>
<head>
<style>
.wrap{
width:960px;
margin:0 auto;
}
.cols{
width:230px;
padding:5px;
float:left;
}
.cols img{
width:230px;
display:block;
margin:5px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cols">
<img src="images/k_Web-01.jpg">
<img src="images/k_Web-02.jpg">
<img src="images/k_Web-03.jpg">
</div>
<div class="cols">
<img src="images/k_Web-04.jpg">
<img src="images/k_Web-05.jpg">
<img src="images/k_Web-06.jpg">
</div>
<div class="cols">
<img src="images/k_Web-07.jpg">
<img src="images/k_Web-08.jpg">
<img src="images/k_Web-09.jpg">
</div>
<div class="cols">
<img src="images/k_Web-10.jpg">
<img src="images/k_Web-11.jpg">
<img src="images/k_Web-12.jpg">
</div>
</div>
</body>
</html>
You can also use css to set the heights and widths one time. Try this:
HTML:
<div class="img_container">
<div class="port"><img src="images/..."></img></div>
<div class="land"><img src="images/..."></img></div>
</div>
CSS:
.img_container {
width: 250px;
height: 250px;
background-color:grey;
}
.port {
width: 100px;
height: 200px;
}
.land {
width: 200px;
height: 100px;
}
That's better, because you cut the style from code.
I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?
<style type="text/css">
html, body, #wrapper, images {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.center_mini {
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float {
float: left;
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
<div class="center">
<div class="center_mini">
<img src="images/background_01.png" width="800" height="144" alt="bg">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/background_02.png" width="503" height="456" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini">
<img src="images/background_03.png" width="246" height="89" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_05.png" width="246" height="106" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_06.png" width="246" height="102" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_07.png" width="246" height="159" alt="bg">
</div>
</div>
</div>
<div class="center_mini_float">
<img src="images/background_04.png" width="51" height="456" alt="bg">
</div>
</div>
</div>
<!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>
Try adding:
img { display: block; }
The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.
Depending on your layout needs, try
img { display: block; }
or
img { display:inline-block; }
If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.
More info:
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/
I think the better solution will be using
img { vertical-align: middle; }
This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.
Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:
float:left;
or
display:inline-block;
or
display:block;