Scenario: I want to make a html page that has many image thumbnails (about 20).
I want to make it adaptive/responsive. It should have 4 thumbnails in a row (see Picture1) when it's on wider browser (such as PC browser - mozilla etc) (see Picture2)
Then, when the browser reduces it's size, it should decrease it's size.
And if the browser is too small, 1 thumbnail per row should appear (such as mobile browsers etc). (see Picture3)
It should have space in between photos (padding?)
I think this should be done using CSS?
I only have following code, which reduces thumbnail's size when browser's size is reducing.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>
P.S: EDIT, SEE THIS PHOTO FOR FURTHER CLARIFICATIONS.Thanks
you can achieve this using media queries
take a look at this snippet:
#container {
width: 100%;
max-width: 980px; /* updated - choose whatever width you prefer */
margin: auto /* updated */
}
#container > div {
width: 25%;
float: left;
}
#container img {
max-width: 100%;
display: block;
box-sizing: border-box;
padding: 5%
}
/*whatever width query you like for phones*/
#media screen and (max-width: 640px) {
#container > div {
width: 100%;
float: none
}
<div id="container">
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
<div>
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
<img src="//lorempixel.com/1600/900" />
</div>
</div>
Related
I want to understand why images don't necessarily center properly. I was told that by default, <a> tags are inline elements, so in order to change their size, you will need to change their display property to block or inline block. Then, once you set the width of the <a> tag, you can set the width of the <img> tag to 100% and it will conform to the shape of the <a> tag.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<img src="photos/thumbnails/01.jpg" alt="Image 1">
<img src="photos/thumbnails/02.jpg" alt="Image 2">
<img src="photos/thumbnails/03.jpg" alt="Image 3">
<img src="photos/thumbnails/04.jpg" alt="Image 4">
<img src="photos/thumbnails/05.jpg" alt="Image 5">
<img src="photos/thumbnails/06.jpg" alt="Image 6">
<img src="photos/thumbnails/07.jpg" alt="Image 7">
<img src="photos/thumbnails/08.jpg" alt="Image 8">
<img src="photos/thumbnails/09.jpg" alt="Image 9">
<img src="photos/thumbnails/10.jpg" alt="Image 10">
<img src="photos/thumbnails/11.jpg" alt="Image 11">
<img src="photos/thumbnails/12.jpg" alt="Image 12">
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
padding: 0 auto;
}
/* If a flex container is set to width */
But I've tried that it still hasn't been working. I know images have their own dimensions when they get imported, but whats the logic here? I keep having to expierment with CSS settings when working with images because they are so unpredictable.
https://ibb.co/Y02j6VL
There might be 4 possibilities.
1) Change your .images padding to margin: 0 auto, like so:
.images {
border: 1px red solid;
margin: 0 auto;
}
2) Depending on your layout its also possible that images is taking 100% width.
So you need to also add text-align:center on images div.
3) Your images div can be tranformed to display:flex and then set justify-content: center on it.
4) If you want to use .container content to be centered. You can use align-item:center on the images div. Since, container has flex-direction:column
.container {
display: flex;
flex-direction: column;
align-items:center;
margin: 0 auto;
padding: 10px;
border: 1px solid black;
}
input[type="search"] {
height: 30px;
}
.images {
border: 1px red solid;
margin: 0 auto;
text-align: center;
}
<div class=container>
<div class="images">
<img src="photos/thumbnails/01.jpg" alt="Image 1">
<img src="photos/thumbnails/02.jpg" alt="Image 2">
<img src="photos/thumbnails/03.jpg" alt="Image 3">
<img src="photos/thumbnails/04.jpg" alt="Image 4">
<img src="photos/thumbnails/05.jpg" alt="Image 5">
<img src="photos/thumbnails/06.jpg" alt="Image 6">
<img src="photos/thumbnails/07.jpg" alt="Image 7">
</div>
</div>
Since your code is using display: flex; here is a solution that continues to use it. However it makes more sense to flex the images class. To center the content use align-items: center; justify-content: center; depending on flex-direction.
Sidenote: padding: 0 auto; is not a thing, there is no auto value for padding.
.container {
margin: 0 auto;
padding: 10px;
}
input[type="search"] {
height: 30px;
}
.images {
width: 245px;
display: flex;
flex-direction: row;
border: 1px red solid;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/lightbox/lightbox.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class=container>
<!-- <form action="form-field"> -->
<input type="search" id="site-search" placeholder="Search(16pt)">
<!-- </form> -->
<div class="images">
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
<div>
<img src="https://www.gravatar.com/avatar/b0327f4c2d7593ae3c7185a66d69d81b?s=48&d=identicon&r=PG&f=1" alt="Image 1">
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/lightbox/lightbox-plus-jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I have this grid of images. I want no spacing in between. Also the width should be 100% of parent. Each column same size, in this case 20%. The flex takes care of that. However I want the height to main aspect ratio, but that is where the problem is. The height of the images stays constant as I zoom in and out (or resize window). It needs to be same aspect ratio as the current width of the image.
Does anyone know how to fix this?
HTML
<div class="image-grid-container">
<div class="image-grid">
<img src="images/me/img01.png" />
<img src="images/me/img02.png" />
<img src="images/me/img03.png" />
<img src="images/me/img04.png" />
<img src="images/me/img05.png" />
</div>
<div class="image-grid">
<img src="images/me/img06.png" />
<img src="images/me/img07.png" />
<img src="images/me/img08.png" />
<img src="images/me/img09.png" />
<img src="images/me/img10.png" />
</div>
<div class="image-grid">
<img src="images/me/img11.png" />
<img src="images/me/img12.png" />
<img src="images/me/img13.png" />
<img src="images/me/img14.png" />
<img src="images/me/img15.png" />
</div>
</div>
CSS
.image-grid-container .image-grid {
display:flex;
}
.image-grid-container .image-grid img {
width:100%;
}
You should set each image inside div.
Something like this:
<div class="img">
<img src="http://placehold.it/200x200" />
</div>
And then in CSS
.image-grid-container .image-grid .img img {
width: 100%;
}
Full example here: https://jsfiddle.net/cvru2yL5/
I'm trying to make a horizontal image slider. Lets say there are 6 total images and 3 are displayed at a time. So the width of outer div should be width of 3 images and width of inner div is equal to 6 images so that it can be scrolled using JavaScript, but size of inner div is equal to outer div only.
HTML
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
CSS
.image_slider {
width: 100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper {
position: absolute;
height: 500px;
display: inline;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
fiddle
You should use width:auto,max-width:100%, and white-space:nowrap on .image_slider.
.image_wrapper should be set to width:auto and position:absolute
<style>
.image_slider {
white-space: nowrap;
width: auto;
max-width:100%;
position: relative;
height: 500px;
overflow: hidden;
}
.image_wrapper{
width:auto;
position:absolute;
}
.image_wrapper > img {
width: 500px;
height: 500px;
}
</style>
<div class="image_slider">
<div class="image_wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
You can calculate the width of img wrapper dynamically with jquery and achieve what you want like below
var width = 0;
$('img').each(function() {
width += $(this).outerWidth();
});
$('.wrapper').width(width + 100);
div {
overflow:hidden;
background: red;
}
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="wrapper">
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
<img src="http://www.360fashion.net/wp-content/uploads/2013/01/image-placeholder-500x500.jpg" />
</div>
</div>
This question already has answers here:
Making a div vertically scrollable using CSS
(10 answers)
Closed 7 years ago.
I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.
my code for the horizontal scroller is
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row">
<div id="divd" style="width: 1680px;">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
The css I used is as follows
.pic - container {
/* The width of mydocument */
width: 1350 px;
margin: 0 auto;
white - space: nowrap;
overflow - x: inherit;
overflow - y: hidden; -
ms - overflow - style: -ms - autohiding - scrollbar;
}
.pic - row {
/* As wide as it needs to be */
width: 1527 px;
}
Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling
Use the css below
.pic-container {
width: 50px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
EDIT :- Added a '.' before the class name
see the fiddle link HERE
you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.
.pic-container {
width: 1350px;
margin: 0 auto;
white-space: nowrap;
}
.pic-row {
/* As wide as it needs to be */
width: 1350px;
height: 400px;
overflow: auto;
}
.pic-row a {
clear: left;
display: block;
}
<div class="pic-container">
<div class="pic-row">
<img src="images/A.Png" />
<img src="images/B.Png" />
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />
<img src="images/I.Png" />
<img src="images/J.Png" />
<img src="images/K.Png" />
<img src="images/L.Png" />
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />
<img src="images/W.Png" />
<img src="images/X.Png" />
<img src="images/Y.Png" />
<img src="images/Z.Png" />
</div>
</div>
Try this:
index.html:
.pic-container {
width: 600px;
height: 600px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="pic-container">
<img src="images/A.png" />
<img src="images/B.png" />
<img src="images/C.png" />
<img src="images/D.png" />
<img src="images/E.png" />
</div>
</body>
</html>
i have some trouble finding a way to show some thumbs in the middle of the screen, especially if one resizes the window (-> responsive design).
A couple a images are displayed in the next line but then centerd...which is not a surprise at all...but how can i have the center effect (in regard to have the images displayed always in the center)
But have the last images float left so that they have an equal beginning with the above line?)
My HTML code so far looks like this (see also he fiddle : http://jsfiddle.net/Zw9Ug/)
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Template Gallery </title>
<meta name="description" content="This is the content">
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id ="gallery_container">
<!-- // TODO - hurry -->
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
<img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
</div>
</div>
</div>
</body>
</html>
css:
#wrapper{
margin:0px auto;
width:90%;
text-align: center;
}
#inner{
margin-left: auto;
margin-right: auto;
}
#gallery_container{
width:auto;
float:left;
}
#gallery_container img{
min-height:90px;
max-height:170px;
}
body {
background-color: grey;
}
Thanks a lot!
Depending on your actual needs, you could either add this:
#gallery_container img{
float: left;
}
However, the space between the border and the outermost left / outermost right image won't be the same.
Or, if you do want to achieve that effect, you could add:
#wrapper{
text-align: justify;
}
But now the spacing between the images isn't exactly the same.