Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below
Related
I have this simple script where i have 2 responsive images. If you minimize the window you will that the images will accordingly.
But i put 2 images in the same div like this:
<div class="wrapper">
<div class="block">
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
</div>
</div>
i wont take the same effect, WHY?
https://jsfiddle.net/zqgy89k7/
Because you still had a width of 100% per image. Setting the width to 50% makes them scale again. Also set the height to auto to remain proportions.
See example below:
.wrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
border: solid red;
}
.block {
display: flex;
width: 100%;
border: solid blue;
}
.block img {
width: 50%;
max-width: 400px;
height: auto;
}
<div class="wrapper">
<div class="block">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
</div>
You can comment the heigh: 200px line code. And that would be a solution.
Another one is to add flex-wrap: wrap to the flex-father container, and this would be visualy more likely.
Here is the example:
JS Fiddle with responsive images
I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.
You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;
One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}
Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}
Imagine websites like 9Gag. You upload an image and they display it always with the same width and only the height changes.
How can I achive this? I cant even resize my images hardcoded.
CSS:
.post img{
height: 200px;
width: 300px;
}
HTML:
<div class="post">
<img src="img/bf1.jpg">
</div>
The image stays the same size.
You should change CSS style to:
.post img{
height: auto;
width: 300px;
}
Have you tried:
<div class="post">
<img height="200px" width="300px" src="img/bf1.jpg">
</div>
Hope this helps!
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 have a horizontal layout with width: auto and height: 100%, but the body or container doesn't stretch to keep the aspect ration of my image.
I need the layout to be like this seen in this attached image:
I will use these images as a background of the panel divs.
Here is my code:
HTML
<body>
<div id="cover" class="panel">
<img src=""/>
</div>
<div id="panel1" class="panel">
<img src=""/>
</div>
<div id="panel2" class="panel">
<img src=""/>
</div>
<div id="panel3" class="panel">
<img src=""/>
</div>
<div id="panel4" class="panel">
<img src=""/>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
height: 100%;
}
body {
width: auto;
height: 100%;
}
.panel {
width: auto;
height: 100%;
float: left;
}
.panel img {
width: auto;
height: 100%;
z-index: -1;
}
You can also see it at this jsfiddle.
I floated the .panel to the left so it will display it all horizontally, but the container is not accomodating the width of all the panels, they just stack on top of each other.
Note: I don't want to have a fixed with, I need it to be responsive.
Here's an example of what I want to accomplish (jsfiddle).
As you can see there's no vertical scrollbar only the horizontal scrollbar is showing and when you resize the viewport the images adjust its width and height and keeps its aspect ratio.
Here's an update of your original fiddle:
http://jsfiddle.net/rsPRz/45/
Trying to stay as close to your original code as possible...
HTML
<html>
<body>
<img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
height: 100%;
}
body {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
img {
display: inline-block;
}
I think you need to keep all of them in a parent div whose width and height will be equal to the window width and height
The example you have shown is working fine because it has single image. When you are using multiple images/div you should divide the width equally for the div and give max-width:100% to the image in it.
I have used only 4 divs for example. Check this demo http://jsfiddle.net/rsPRz/34/
With a div.container and a little help of jQuery you might get along.
Updated link: http://jsfiddle.net/rsPRz/37/
widthSum = 0;
$('.panel img').each(function() {
widthSum += $(this).width();
});
$('.container').width(widthSum);
Is this a possible solution for you?