I am creating an image gallery populated with a dynamic sized amount of images, the PHP and HTML are as follows;
<?php
$dirname = "Pictures/";
?>
<ul class="gallery">
<?php
$images = glob("" . $dirname . "*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE);
foreach ($images as $image)
{
$File = pathinfo($image);
?>
<li class="container">
<img src="<?php echo $url.$image; ?>" alt="">
</li>
<?php
}
?>
</ul>
The css I have is as follows;
.gallery
{
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 5px;
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
align-content: stretch;
list-style: none;
}
.gallery li
{
width: 100% !important;
height: auto !important;
margin-bottom:5px!important;
border:1px solid #dfe1e5;
}
.container img
{
width: 100% !important;
height: auto !important;
}
This code I have so far doesn't allow me to randomly display the images while justifying the bottom row so the whole gallery is more rectangular, as follows;
Justified Random Rows
Also, this code is in columns, what I would like is a more random flow instead of breaking things up into columns.
Can someone give some advice of a better way to achieve the goal of a random sized self aligning justified image gallery using CSS and HTML only.
I created a JSFiddle https://jsfiddle.net/awhe61kg/ for those who request.
As a side note, what I would like to achieve at the least is like the unitegallery theme https://unitegallery.net/index.php?page=tiles-justified, but without the use of Javascript if at all possible. The reason I don't want to use this gallery is because I've tried it and it is glitchy. Although it is a beautiful design which I would like to replicate in CSS and HTML.
** FIXED ISSUE BELOW **
I can nearly achieve the unitegallery behavior with CSS flex boxes alone as follows;
.gallery
{
min-width:100%;
max-width:100%;
list-style: none;
font-size:0;
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items: stretch;
}
.gallery li
{
flex-direction: row;
flex:20 20 auto;
width: auto !important;
height:200px;
max-width:400px; <-----------causes the problem, remove and its fixed
margin-bottom:5px!important;
border:1px solid #dfe1e5;
}
.container img
{
min-width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}
Although I'm having an issue currently with the top row not stretching correctly at certain widths in responsive design mode.
** FIXED **
Here is a JSFiddle with the flex box image gallery and the element which was causing the problem commented out https://jsfiddle.net/ag9s2qdt/.
The page you link to (here) just uses rows instead of columns. If you want justified rows of images with just HTML and CSS, you can do this:
.justified {
text-align: justify;
}
.justified:after {
content: "";
display: inline-block;
width: 100%;
}
.justified img {
height: 100px;
display: inline-block;
}
<div class="justified">
<img src="https://cdn.pixabay.com/photo/2016/11/19/18/57/godafoss-1840758_1280.jpg" />
<img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="">
<img src="https://i.picsum.photos/id/1013/4256/2832.jpg" alt="">
<img src="https://i.picsum.photos/id/1009/5000/7502.jpg" alt="">
<img src="https://i.picsum.photos/id/1006/3000/2000.jpg" alt="">
<img src="https://i.picsum.photos/id/1005/5760/3840.jpg" alt="">
<img src="https://i.picsum.photos/id/1003/1181/1772.jpg" alt="">
<img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
<img src="https://i.picsum.photos/id/1000/5626/3635.jpg" alt="">
<img src="https://i.picsum.photos/id/10/2500/1667.jpg" alt="">
<img src="https://i.picsum.photos/id/100/2500/1656.jpg" alt="">
</div>
Of course, the gaps between each image can be wide, and you're responsible for making sure there isn't a weird amount of images on the last row. JavaScript would help tremendously with the calculations for actually getting a good result here, but to each his own.
Related
In my jquery Mobile app, I've got a page that has a header and footer and the main content is 4 images arranged 2x2. I chose to create my own 2x2 grid in a div since I couldn't get JM grid to work. The code for the main content looks like this:
<div class="container">
<div class="image">
<a href="#intro">
<img src="img/Intro1.png" />
</a>
</div>
<div class="image">
<a href="#putting">
<img src="img/Putting1.png" />
</a>
</div>
<div class="image">
<a href="#chipping">
<img src="img/Chipping1.png" />
</a>
</div>
<div class="image">
<a href="#sand">
<img src="img/SandPlay1.png" />
</a>
</div>
</div>
The page css that arranges everything looks like this:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .image {
width: 50%;
}
.container img {
width: calc(100% - (5px * 2));
margin: 5px;
}
This works fine on an iPhone, but the images are too large on an iPad. On the iPad the images are the full width which makes them go beyond the bottom edge of the screen. I've looked all over for a solution to this and finally decided to come here. Thanks in advance for any help/guidance.
What you'll want to use is media queries. For the issue with the ipad you can set the media queries so that if your page is being viewed on a tablet/ipad size you can specify the size of the images and anything else. Take a look at this example:
.sample {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.sample {
font-size: 3.5rem;
margin: auto;
width: 50%;
padding-bottom: 100px;
}
}
In the above you can see the class of sample (both outside and inside the media query) has different css styles based on the screen size.
Take a look at this for further info: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I recently started an intro web dev course on Udacity. They're covering a basic grid framework right now, and the whole project is easy except I've been working for hours on aligning captions correctly under their images. The goal is to imitate the portfolio page mock-up in the imgur link here (http://imgur.com/CIQWlBi).
Now, what I'm trying to do, mostly for the sake of learning to do it, is:
distribute/justify the images and captions under "Featured Works" across the whole width of the grid; left-aligned for left image and right-aligned for right image
use one grid column for each image-and-caption (I can easily make my page resemble the mock-up by dispensing with the grid and simply using flexbox with justify-content: space between, but there SHOULD be a way to do this WITH the grid, I think.)
center captions (h3 and p) relative to the IMAGE, not relative to the grid column. This makes a difference on the leftmost and rightmost columns.
The last one is what's been giving me trouble. I've finally said screw it, I'll ask people much smarter than me to solve what's probably a really simple problem. I've tried several different solutions from posts here and on other forums, and none have worked. A couple of things I've tried are (display: table) + (display: table-caption), and (figure) + (figcaption), both of those with a few different style rules.
Is there a clean way to center text under images regardless of the image's position within the container? Or do I need to create containers with explicit sizes for each image, within the columns, and position the text within each container?
Again, flexbox allowed me to replicate the mock-up, but for the sake of learning I'd like to be able to do this within the grid.
EDIT: I forgot to include code snippets. They're rough because I've been trying a bunch of different things.
* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- see how boxes line up
* {
border: 1px solid red !important;
} */
.grid {
margin: 0 auto;
min-width: 960px;
max-width: 1360px; /* caption text centered (relative to image and grid column) at 960px, but I want to see it centered at any width */
}
.row {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 49.99%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
figure {
display: block;
margin: 0px;
}
figure figcaption {
text-align: center;
}
#header {
border-bottom: 3px solid #BCBBBB;
margin-bottom: 30px;
padding-bottom: 15px;
}
#nameheader {
text-align: right;
}
#subname {
margin-bottom: 0px;
}
<body>
<div class="grid">
<div class="row" id="header">
<div class="col-6">
<img src="http://placehold.it/100x100" alt="placeholder">
</div>
<div class="col-6" id="nameheader">
<h1>JANE DOETTE</h1>
<p id="subname">FRONT-END NINJA</p>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="http://placehold.it/960x350" alt="placeholder">
</div>
</div>
<div class="row">
<div class="col-12">
<h2> Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-4">
<figure class="left">
<img src="http://placehold.it/300x200" alt="placeholder" class="left">
<figcaption>
<h3>APPIFY</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure class="center">
<img src="http://placehold.it/300x200" alt="placeholder" class="center">
<figcaption>
<h3>SUNFLOWER</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
<div class="col-4">
<figure class="right">
<img src="http://placehold.it/300x200" alt="placeholder" class="right">
<figcaption>
<h3>BOKEH</h3>
<p>http://url.com</p>
</figcaption>
</figure>
</div>
</div>
</body>
Your current CSS is really quite close to achieving what you want. The only problem left is that the <figure> around each of your images has display:block - which means it will expand to the full width of its container (the enclosing column elements).
This is a problem because your parent columns are always resizing once the browser is wide enough, while your images are statically-sized. As you've noted, this means your caption text will no longer be centered under your image after a certain browser width.
To address this, consider changing your styling for <figure> to:
figure {
display: inline-block;
margin: 0px;
}
This way, your <figure> elements will only expand as wide as they need to based on their contents, rather than always expand to the full width of the enclosing column, so the caption text will no longer be centered relative to the resizing column. Here's a JSFiddle to demonstrate.
Hope this helps! Let me know if you have any questions.
I'm new to HTML and CCS and I'm trying to create a little personal website. I made up a design in Sketch and I've managed to successfully reproduce it on HTML and CSS. I have three big icons at the bottom that send you to different pages (Twitter, Instagram and Tumblr). On a big screen, the website looks great. However, when loading it on a small screen, it looks bad. I want the three icons to stack each one on top of another. Here's a picture of what it looks like now:
What I would like is that each icon is on top of the other, so it would be Twitter, below Instagram, and under that, Tumblr. I've tried many things, like setting up columns and I've looked many tutorials on the internet, but I haven't really found a solution.
Thanks!
EDIT: Code portions
HTML
<div class="social-container">
<div class="twitter">
<img src="images/Twitter Logo.png" alt="Twitter"/>
</div>
<div class="instagram">
<img src="images/Instagram Logo.png" alt="Instagram"/>
</div>
<div class="tumblr">
<img src="images/Tumblr Logo.png" alt="Tumblr"/>
</div>
CSS
.social-container {
margin-top: 100px;
display: block;
width: 60%;
margin: 8px auto; padding: 16px;
text-align: center;
-webkit-columns: 3 33%;
-moz-columns: 3 33%;
columns: 3 33%;
}
#media (max-width: 768px) {
.social-container {
-moz-columns: 1 100%;
-webkit-columns: 1 100%;
columns: 1 100%;
display: inline;
margin: 8px auto;
}
You could do that using media queries. Just define a style for smaller screens. Usually, the size for phone-sized screens is considered to be 768px.
For example, if you are using img for your icons, then you could simply change the display for smaller screens:
Demo Fiddle: http://jsfiddle.net/abhitalks/rvjmk90e/
Demo Snippet:
div.jumbo {
background-color: #eee;
width: 60%;
margin: 8px auto; padding: 16px;
text-align: center;
}
#media (max-width: 768px) {
img {
display: block;
margin: 8px auto;
}
}
<div class="jumbo">
<h2>Hola</h2>
<img src="http://placehold.it/120x120/&text=tw" />
<img src="http://placehold.it/120x120/&text=Ig" />
<img src="http://placehold.it/120x120/&text=tm" />
</div>
A better way for responsive web is not to use <img /> but insert images as the background background-image.
With media query set width: 100% and everything will be fine. If they have 100%, put together under himself.