I'm building an imagegrid containing of 7x3 blocks, but one block need to fill out 2x2. I'd like to use a list since it have to be responsive (the 2x2 should pop out below on mobile). And I try to avoid javascript. But I cant make it work - any ideas ?
big grid:
img img img img img img img
img img img img blck.... img
img img img img blck.... img
mobile grid:
img img img img
img img img img
img img img img
img img img img
blck..............
blck..............
a friend at the office found a nice solution
<html>
<head>
<style>
.images {
width: 100%;
max-width: 1280px;
position: relative;
}
img {
width: 14.285714286%;
height: auto;
float: left;
}
.group {
max-width: 42.857142857%;
float: left;
}
.group img {
width: 33.333333333%;
}
.teaser {
width: 28.571428571%;
background-color: blue;
color: #fff;
text-align: center;
float: left;
padding-bottom: 28.571428571%;
position: relative;
}
.teaser div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
}
#media (max-width: 480px) {
img {
width: 25%;
}
.group {
max-width: 75%;
}
.group img {
width: 33.333333333%;
}
.teaser {
position: absolute;
width: 100%;
padding-bottom: 100%;
float: none;
margin-top: 100%;
}
}
</style>
</head>
<body>
<div class="images">
<div class="group">
<img src="http://placehold.it/400x400/EBE824/fff" alt="" />
<img src="http://placehold.it/400x400/CECAA4/fff" alt="" />
<img src="http://placehold.it/400x400/62C6A0/fff" alt="" />
<img src="http://placehold.it/400x400/F8F07E/fff" alt="" />
<img src="http://placehold.it/400x400/0F8B4B/fff" alt="" />
<img src="http://placehold.it/400x400/EFB92B/fff" alt="" />
<img src="http://placehold.it/400x400/63D1D2/fff" alt="" />
<img src="http://placehold.it/400x400/F5C851/fff" alt="" />
<img src="http://placehold.it/400x400/42BFC0/fff" alt="" />
</div>
<img src="http://placehold.it/400x400/C44D58/fff" alt="" />
<img src="http://placehold.it/400x400/FF6B6B/fff" alt="" />
<img src="http://placehold.it/400x400/C7F464/fff" alt="" />
<img src="http://placehold.it/400x400/4ECDC4/fff" alt="" />
<div class="teaser">
<div>follow me now</div>
</div>
<img src="http://placehold.it/400x400/556270/fff" alt="" />
<img src="http://placehold.it/400x400/542437/fff" alt="" />
<img src="http://placehold.it/400x400/53777A/fff" alt="" />
<img src="http://placehold.it/400x400/C02942/fff" alt="" />
</div>
</body>
</html>
Related
I'm having a problem with my CSS, I assume. I want the picture of the lipstick to align with the face image and have the nail one underneath both of them.
HTML
<center>
<div id="homepage-image preventOverflow homepageHero {{ section.settings.height }} {{ section.settings.color }} index-section">
<div id="left">
<img width=600px type="image/jpeg" src="{{ 'lipstickpink.jpg' | asset_url}}" />
<!-- <img width=600px type="image/jpeg" src="{{ 'shadow.jpg' | asset_url}}" /> -->
</div>
<div id="right">
<div id="top-right">
<img width=900px type="image/png" src="{{ 'faceglam.png' | asset_url}}" />
</div>
<div id="bottom-right">
<img width=600px type="image/jpeg" src="{{ '11_Vertigo_1024x1024.jpg' | asset_url}}" />
</div>
</div>
</div> </center>
CSS
#container {
height: 100%;
width: 100%;
padding-top: $gutter*3;
padding-bottom: $gutter*2;
}
#left > img:nth-of-type(1) {
height: 85vh;
width: 70vw;
}
#left > img:nth-of-type(2) {
height: 65vh;
width: 49vw;
}
#left, #right {
display: inline-block;
}
#top-right, #bottom-right {
display: block;
}
#top-right > img:nth-of-type(1) {
width: 100vw;
height: 100vh;
}
#top-right > img:nth-of-type(2) {
width: 35vw;
height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
width: 60vw;
height: 60vh;
}
#bottom-right > img:nth-of-type(2) {
width: 20vw;
height: 25vh;
}
I have also provided an image of the problem:
It's not completely clear how (i.e in which direction) you want them aligned.
You have a lot of seemingly unnecessary divs - i wondered why.. so I have adjusted both HTML and CSS (used own images from internet)
If I got them in the wrong order, just adjust the images. I adjusted heights (re-adjustable obviously)- but hope you get the general gist!
Hope this helps
#container {
height: 100%;
width: 100%;
margin: 0;
padding-top: $gutter*3;
padding-bottom: $gutter*2;
}
#left{
margin-left:10%;
margin-right:10%;
}
#left > img:nth-of-type(1) {
max-height:200px;
padding:5px;
height:auto;
}
#left > img:nth-of-type(2) {
max-height:300px;
padding:5px;
height: 60vh;
}
#left,
#right {
display: inline-block;
}
#right > img:nth-of-type(1) {
max-height:300px;
height: auto;
margin-left:18vw;
margin-right:18vw;
}
<div id="container">
<div id="left">
<img src="https://lh3.googleusercontent.com/czZtMqTum5GQOYL1NxogiEVZ57Zr5LG0chnil-p3YFTjl3WIQdrADqpaaATmyN-JGjey=h900" alt="face" />
<img src="http://bpc.h-cdn.co/assets/16/38/480x480/gallery-1474299136-urban-decay-vice-pink-lipstick.jpg" alt="lipstick" />
</div>
<div id="right">
<img src="http://www.vipera.com.pl/wp-content/uploads/2016/08/20zestawy_lakier__w_do_artystycznego_zdobienia_paznokci________artistic_manicure_set___219.jpg" alt="nails" />
</div>
</div>
Fiddle
I'm currently running the following code:
HTML
<div style="img"/>
<img src="spiderman.png" alt=""/>
<img src="superman.png" alt="" height="25%" width="25%"/>
<img src="batman.png" alt="" />
</div>
CSS
div{
text-align: right;
}
div img {
display: list-item;
width: 100px;
height: 100px;
}
div:after {
content: '';
display: inline-block;
width: 100
}
I cant seem to get the images to remain in a vertical line and move to the right of the screen, any suggestions would be helpful
display: flex; flex-direction: column; align-items: flex-end; on the parent will put them in a column aligned to the right.
.img {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.img img {
width: 100px;
height: 100px;
}
<div class="img">
<img src="spiderman.png" alt="">
<img src="superman.png" alt="" height="25%" width="25%">
<img src="batman.png" alt="">
</div>
You could also float them right, then clear: right so they're in a column.
.img {
overflow: auto;
}
.img img {
width: 100px;
height: 100px;
float: right;
clear: right;
}
<div class="img">
<img src="spiderman.png" alt="" />
<img src="superman.png" alt="" height="25%" width="25%" />
<img src="batman.png" alt="" />
</div>
You don't need to worry about aligning items to the right with text-align, changing their display, or using :after at all. Simply float the images to the right, and clear them as well :)
div img {
float: right;
clear: both;
width: 100px;
height: 100px;
}
<div>
<img src="http://placehold.it/100" alt="" />
<img src="http://placehold.it/100" alt="" />
<img src="http://placehold.it/100" alt="" />
</div>
Hope this helps! :)
There are some extra space on the right side in my gallery...
My images' container:
.my-gallery figure {
display: block;
float: left;
width: 150px;
}
Is it possible make images always horizontal center in different sized screen without using % percent value? Or someone has a genius idea that makes extra space not so weird?
Or % percent value trick is the only way?
In screen A:
In screen B:
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: 112px;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-height: 26px;
}
.my-gallery img {
max-width: 100%;
}
<div class="my-gallery">
<figure>
<a href="big1.jpg">
<img src="http://placehold.it/112x150" alt="1" />
</a>
<figcaption>111111111111111111111111</figcaption>
</figure>
<figure>
<a href="big2.jpg">
<img src="http://placehold.it/112x150" alt="2" />
</a>
<figcaption>222222222222222222222222</figcaption>
</figure>
<figure>
<a href="big3.jpg">
<img src="http://placehold.it/112x150" alt="3" />
</a>
<figcaption>3333333333333333333333333333333</figcaption>
</figure>
<figure>
<a href="big4.jpg">
<img src="http://placehold.it/112x150" alt="4" />
</a>
<figcaption>444444444444444444444444</figcaption>
</figure>
...
</div>
If using % is a problem, you could use css flexbox to get this done.
https://jsfiddle.net/76dybc3p/1/
Change css of .my-gallery and remove the float in figure
.my-gallery {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.my-gallery figure {
display: block;
margin: 0 5px 5px 0;
width: 150px;
}
The most practical approach is to use #media query
I also changed the .my-gallery rule to
.my-gallery {
margin: 0 auto
}
Sample snippet
.my-gallery {
margin: 0 auto
}
.my-gallery img {
width: 100%;
height: 112px;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-height: 26px;
}
.my-gallery img {
max-width: 100%;
}
#media screen and (min-width: 310px) {
.my-gallery {
width: 310px;
}
}
#media screen and (min-width: 465px) {
.my-gallery {
width: 465px;
}
}
#media screen and (min-width: 620px) {
.my-gallery {
width: 620px;
}
}
<div class="my-gallery">
<figure>
<a href="big1.jpg">
<img src="http://placehold.it/112x150" alt="1" />
</a>
<figcaption>111111111111111111111111</figcaption>
</figure>
<figure>
<a href="big2.jpg">
<img src="http://placehold.it/112x150" alt="2" />
</a>
<figcaption>222222222222222222222222</figcaption>
</figure>
<figure>
<a href="big3.jpg">
<img src="http://placehold.it/112x150" alt="3" />
</a>
<figcaption>3333333333333333333333333333333</figcaption>
</figure>
<figure>
<a href="big4.jpg">
<img src="http://placehold.it/112x150" alt="4" />
</a>
<figcaption>444444444444444444444444</figcaption>
</figure>
</div>
I have no idea why you wouldn't use %, but this is another alternative: use a table to scaffold your items and set the property table-layout: fixed;
HTML
<table>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
</table>
CSS
table{
table-layout: fixed;
}
How to make these images stay in center? Here are my css and html codes.
My html code:
<div id="logos">
<div id="q">
<img id="round" src="img/i1.jpg" />
<img id="round" src="img/i1.jpg" />
<img id="round" src="img/i1.jpg" />
</div>
</div>
My css code:
#logos {
display: inline-block;
width:100%;
}
#q{
display: block;
}
#round {
border-radius: 50%;
display: inline;
margin: 0 5px;
width: 150;
height: 150;
position: cetner;
}
#image{
text-align:center;
}
#image img{
margin:0 auto;
}
<div class="image">
<img src="path_to_your_image" alt="">
</div>
Use text-align: center on the parent...
#q{
display: block;
text-align: center;
}
.round {
border-radius: 50%;
display: inline;
margin: 0 5px;
width: 150px;
height: 150px;
}
<div id="logos">
<div id="q">
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
</div>
</div>
Also, ID's must be unique. rounded should be a class not an ID.
Secondly, position: center; doesn't exist in CSS.
And finally, width: 150 and height: 150 must have a unit of measurement (probably px) though this will have no effect because the elements are inline - perhaps you meant inline-block?
Add to #round css:
position: relative;
display: block;
margin: auto;
width: 150px; /*units are needed */
height: 150px; /*units are needed */
The Code
<div class="flex-align">
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
<img class="round" src="http://placehold.it/150x150" />
</div>
The CSS
.flex-align {
display: flex;
align-items: center;
justify-content: center;
}
Im trying to make an image grid for a web project what I intend to do is the following.!
Image
All the boxes will be images, i need to cover 50% of the div's width and 100% of it's height [white box]. The red boxes will cover 25% of div's width and 50% of it's height. Ive tried with image postion and with table and this i what i get
Image , i want to know if theres a better way to make this. Thanks for your help and time :)
<div class="source_miu">
<table border="1">
<tr>
<th rowspan="2"><img src="http://ns223506.ovh.net/rozne/a0983fdf5e6616a0e8515ad95ef1e10e/wallpaper-664645.jpg"></th>
<td><img src="http://ns223506.ovh.net/rozne/a039b13699e8fcfd8f6c676279355546/wallpaper-357877.jpg"></td>
<td><img src="http://ns223506.ovh.net/rozne/5c5b16fd81a613372f43fdf0f89235d4/wallpaper-988986.jpg"></td>
</tr>
<tr>
<td><img src="http://ns223506.ovh.net/rozne/1ce14f71e1b760232ddb978a60ef6383/wallpaper-664196.jpg"></td>
<td><img src="http://ns223506.ovh.net/rozne/9353f6e8133cc441f096552bbdbe8ebd/wallpaper-69508.jpg"></td>
</tr>
</table>
</div>
CSS
.source_miu{
width:100%;
padding:2%;
background-color: #3c3c3c;
}
.source_miu table{
width: 100%;
}
.source_miu table{
padding: 0;
margin: 0;
width: 100%;
}
.source_miu table th{
height: 50%;
width:50%;
}
.source_miu table td{
width: 25%;
height: 50%;
}
This should work, fiddle.
HTML
<div class="container">
<div class="left">
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
</div>
<div class="right">
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
</div>
</div>
CSS
.container .left, .container .right
{
display: inline-block;
width: 50%;
float: left;
}
.container .left img
{
width: 100%;
}
.container .right img
{
display: inline-block;
width: 50%;
float: right;
}
Well you could determine the size of your pictures in pixels that way you can make sure the the 25% images are of same width and height.
50px just for the example.You can play whit it and try until you get a size that works for you.
<img src="your image.jpg" width="50px" height="50px">
This should also work, avoiding the use of display:inline-block; which doesn't work for IE7 or below -- doesn't matter if that doesn't matter though ;)
http://jsfiddle.net/H5npz/
markup:
<div class="panels">
<img class="a" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
</div>
css:
.panels {
oveflow: hidden;
width: 400px;
height: 250px;
}
.panels .a, .panels .b {
float: left;
display: block;
margin: 0;
padding: 0;
}
.panels .a {
width: 50%;
height: 100%;
}
.panels .b {
width: 25%;
height: 50%;
}