I'm trying to get a grid of 2 x 3 pictures to fill to 100% width using scaling images.
But for some reason there's a 12 or 13 px gap to the right of the images. Anyone know how to solve this?
I'm going crazy here!
body {
margin:0;
padding:0;
}
.header {
height:200px;
width:auto;
background:#22FF00;
}
.imageContainer {
position: relative;
width: 33%;
padding-bottom: 26%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.clearfloats {
clear:both;
}
<div class="header">asd</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="clearfloats"></div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
Hashem beat me with his comment, but he's right, use
.imageContainer {
width: 33.333%;
}
to lose the gap.
See demo.
Your .imageContainer elements are set to have a width of 33%. 3 sets of 33% make 99%, meaning 1% of your width isn't accounted for. You can fix this by setting the width to 33.33% instead:
.imageContainer {
position: relative;
width: 33.33%;
padding-bottom: 26%;
float: left;
height: 0;
}
body {
margin:0;
padding:0;
}
.header {
height:200px;
width:auto;
background:#22FF00;
}
.imageContainer {
position: relative;
width: 33.33%;
padding-bottom: 26%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.clearfloats {
clear:both;
}
<div class="header">asd</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="clearfloats"></div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
<div class="imageContainer">
<img src="http://placekitten.com/600/449" />
</div>
Related
I need help to find a solution with a "grid" layout in css. I have 3 rown of images and I need the images to dynamically and automatically change with when the browser window gets smaller.
The layout can be found here:
I have set it up like this and it sort of works but I am not 100% atisfied so I wonder if someone can help me do it even more responsive and dynamic.
<!--HTML code-->
<div class="container">
<div class="box1"><img src="BILDER/Inkastare/slang.jpg" class="img slang" /></div>
<div class="box1"><img src="BILDER/Inkastare/olja.jpg" class="img olja" /></div>
<div class="box1"><img src="BILDER/Inkastare/slangpressar.jpg" class="img slangpressar" /></div>
<div style="clear: both;"></div>
<div class="box2"><img src="BILDER/Inkastare/filter.jpg" class="img filter" /></div>
<div class="box1"><img src="BILDER/Inkastare/sagmotorer.jpg" class="img sagmotorer" /></div>
<div style="clear: both;"></div>
<div class="box4"><img src="BILDER/Inkastare/givare.jpg" class="img givare" /></div>
<div class="box4"><img src="BILDER/Inkastare/packningar.jpg" class="img packningar" /></div>
<div class="box4"><img src="BILDER/Inkastare/matarhjul.jpg" class="img matarhjul" /></div>
<div class="box4"><img src="BILDER/Inkastare/cylindrar.jpg" class="img cylindrar" /></div>
</div>
/* CSS-Code */
.container {
width: 99%;
}
.img.slang, .img.olja, .img.slangpressar, .img.filter, .img.sagmotorer, .img.givare, .img.packningar, .img.matarhjul, .img.cylindrar {
margin-right: 19px;
margin-bottom: 19px;
float: left;
width: 100%;
}
.box1 {
width: 97%;
max-width: 410px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
.box2 {
width: 97%;
max-width: 838px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
.box4 {
width: 97%;
max-width: 303px;
min-width: 200px;
padding: 0;
float: left;
margin-right: 19px;
}
You may also use a grid system, alike bootstrap based on a 12 columns to dispatch your boxes :
example :
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
[class^="box"] {
background: white;
}
[class^="box"] img {
width: 100%;
height: 100%;
vertical-align: top;
ob-ject-fit: cover;
}
.box3 {
grid-column: span 3
}
.box4 {
grid-column: span 4
}
.box8 {
grid-column: span 8
}
/* makeup */
.container {
gap: 19px;
background: #DB545A;
width: 800px;
max-width: 99%;
margin: 1em auto;
border: solid;
}
<div class="container">
<div class="box4"><img src="https://picsum.photos/id/1/240/200" class="img slang" /></div>
<div class="box4"><img src="https://picsum.photos/id/1011/240/200" class="img olja" /></div>
<div class="box4"><img src="https://picsum.photos/id/1001/240/200" class="img slangpressar" /></div>
<div class="box8"><img src="https://picsum.photos/id/1016/500/200" class="img filter" /></div>
<div class="box4"><img src="https://picsum.photos/id/1002/240/200" class="img sagmotorer" /></div>
<div class="box3"><img src="https://picsum.photos/id/1008/200/200" class="img givare" /></div>
<div class="box3"><img src="https://picsum.photos/id/1020/200/200" class="img packningar" /></div>
<div class="box3"><img src="https://picsum.photos/id/106/200/200" class="img matarhjul" /></div>
<div class="box3"><img src="https://picsum.photos/id/108/200/200" class="img cylindrar" /></div>
</div>
useful ressource :
https://css-tricks.com/snippets/css/complete-guide-grid/
https://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I would recommend to use css flex-box as it is responsive and flexible. You could do something like this:
.container{
display: flex;
flex-wrap: wrap;
}
I recommend you to read through the guide I linked above.
If I am using a transform scale is there a way to keep the object fit image using cover from stretching?
Here is my code
div.category {
width: 80%;
height: 150px;
margin: 20px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
transition: transform 0.35s;
object-fit:cover;
}
div.category:hover {
transform:scalex(1.2)
}
html
<div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
</div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
</div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
</div>
</div>
Here is a fiddle explaining what I mean:
http://jsfiddle.net/n1x5ak2t/
I would love if the image just scaled up to fit the new div width without distorting.
Consider a different animation. Here is an idea using clip-path
div.category {
width: 80%;
height: 150px;
margin: 20px;
position: relative;
overflow: hidden;
transition: 0.35s;
clip-path:inset(0 10%);
}
img {
width: 100%;
object-fit: cover;
transition: 0.35s;
}
div.category:hover {
clip-path:inset(0 0%);
}
<div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
</div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
</div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
</div>
</div>
div.category:hover img {
transform:scalex(1.2)
}
https://jsfiddle.net/7d31Ln0f/
Here is a different approach.
div.category {
width: 80%;
height: 150px;
margin: 20px;
position: relative;
overflow: hidden;
}
img {
width: 100%;
transition: transform 0.35s;
object-fit: cover;
}
div.category:hover {
transform:scalex(1.2)
}
div.category:hover img {
transform:scale(1.2)
}
<div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
</div>
<div class="category">
<img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
</div>
<div class="category">
<img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
</div>
</div>
I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them.
Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.
Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:640px;
height:100%;
}
.image {
position: relative;
width: auto; /* for IE 6 */
max-height: 640px;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
bottom:-15px;
left: 0;
width: 600px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>
Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.
body{
background-color:darkgrey;
}
.row{
left: 50%;
}
#media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
margin-right: 20px;height:auto; margin-bottom: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-word; /* non standard for webkit */
font-size: 2vw;
max-width: 100%;
max-height: 100%;
color:white;
}
<body>
<div class="row">
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>
Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
}
.wrapper {
overflow: hidden;
margin: auto;
padding: 0.75rem;
background-color: #eee;
}
div > div {
padding: 0.75rem 1.5rem;
margin: 0.5rem;
background-color: #ccc;
float:left;
}
div:nth-child( 4n ){
clear: left;
}
.note {
width: 100%;
padding: 1rem;
background-color: #000;
color: #eee;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#media( max-width: 1025px ){
div:nth-child( 2n + 3 ){
clear: left;
}
div:nth-child( 4n ){
clear: none;
}
.note {
background-color: rgba( 0, 0, 0, 0.6 );
}
}
<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
<div>div1</div> <div>div2</div> <div>div3</div>
<div>div4</div> <div>div5</div> <div>div6</div>
</div>
How can I float an image to the left with no space below?
I have used float: left.
HTML
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
#container {
width: 100vw;
overflow: hidden;
}
#container img {
min-width: 33.33333333333%;
max-width: 33.33333333333%;
float: left;
}
<div id="container">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/150/150/">
<img src="http://lorempixel.com/120/120/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/110/110/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
You can wrap images in columns, like this fiddle
<div class = "container">
<div class="column">
<img src = "http://placehold.it/200x300">
<img src = "http://placehold.it/200x200">
</div>
<div class="column">
<img src = "http://placehold.it/200x400">
<img src = "http://placehold.it/200x200">
</div>
<div class="column">
<img src = "http://placehold.it/200x500">
<img src = "http://placehold.it/200x200">
</div>
</div>
css
.container{
width: 100vw;
position: relative;
}
.column {
float:left;
width:33.333333%;
}
.column img{
width:100%;
border: 1px solid;
}
if you need to apply with no divs inside the container, I would recommend Roy's answer
I have a series of images each with his own overlay. How can I have them aligned like inline-blocks? I tried adding adding display: inline-block;to .image-wrapper but the images are always all positioned in the top left corner of the div.container (Here is a jsfiddle).
Here are the html and css
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
</div>
EDIT:
revised css with dfsq suggestion to remove position:absolute; from .tweetty.
Quoting dfsq comment:
"Elements with position absolute don't contribute to the width and height of their parent container. So the image-wrapper divs just collapse as if they were empty if all children have position:absolute; "
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
I fiddled with the fiddle, and this seems to work. removed all the positioning from all but the vest. Used the inline-block display mode. Set top to -300px, and also the bottom-margin, otherwise you get a gap below the images.
.container {
/* position:relative;*/
}
.image-wrapper {
/* position: relative;*/
display: inline-block;
}
.tweetty {
/* position:absolute;
overflow:auto;
top:0;
left:0;*/
}
.image-vest {
position:relative;
top:-300px;
margin-bottom: -300px;
left:0;
background-color:#00f;
width:220px;
height:300px;
opacity:0.4;
color:#fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
(here's the JSFiddle version)