Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
In my website, I have a gallery which displays user uploaded images. The problem is , since we dont have a control over the dimensions of the images uploaded by the user, different images are appearing in different dimensions . What is the best approach to make the images appear in uniform sizes using html? or is it best done in the jquery/javascript?
If you don't want to crop your images server-side but still want some level of uniformity then you could use the max-width and max-height properties in CSS and a small snippet of jQuery to do the job for you. This won't change the original image, but will shift it within it's container so it is centered but fills the frame.
You then need to decide the width and height that all thumbnails will be and they will overflow their boundaries centrally aligned and ultimately uniform.
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
float: left;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x250">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
</div>
DEMO
HTML:
The HTML is a little long winded, but it is required to offset the image inside the parent.
JS:
The JavaScript looks at the longest edge of the image and adds a class to it of either Portrait, Landscape or Square. These classes specify either a max-width, max-height or both depending on the orientation.
One way of doing this is wrap all images in a 'div'.
HTML :
<div class="img_parent">
<img />
</div>
<div class="img_parent">
<img />
</div>
CSS :
.img_parent{ width:100px; height:100px; overflow:hidden; display:inline-block;}
.img_parent img{ width:100%;}
The solution to this, is to give them fixed heights in css. (example img{ height:100px; } )
When users upload the images, make it automatically crop that image to a specific size eg. 400px x 400px
The demo below is just a crop idea, but you can modify the code to make it automatically crop it to a size of eg 400px x 400px
Croppic example
This is just a thought. Hope you come right.
Related
I've been building flexbox containers - actually rows of them - and in some there were leading images. To my surprise something unexpected happens every time I put in one row flexbox containers with leading images and containers of other type (where image doesn't come first).
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
CSS:
.container {
display: inline-flex;
background-color: tomato;
}
.image {
height: 28px;
}
Please see the following example: https://codepen.io/GuRuGu/pen/KeYGwv
I'd really like to know why it happens as I'm at a loss right now.
Alex's answer is probably the best one, as it's more flexible, but this is a quick alternative: if your images are always a fixed height (in the demo they are 28px) you can make the container elements the same height, and align them with vertical-align (because they are inline elements):
.container {
height: 28px;
vertical-align: bottom;
}
I don't know if it's a solution for you, maybe I misunderstood the issue. But in my opinion, if you want to align all containers, you can wrap all containers with a wrapper and add it a display : flex;. With that configuration, maybe you don't need a display: inline-flex on containers anymore. I let them on the code below, because I don't know what are your limitations.
Here is your code with that modification. I add a .supracontainer class on a div wrapper around your containers. You can control the vertical alignment by using align-items flexbox property on supracontainer class.
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
You can change item order within a flex element using the order property:
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
order:0;
}
span{
order:1;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
I have a Razor page that displays a collection of thumbnail images in a vertical stack:
#foreach (var photo in Model)
{
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="#photo.LargeSquareThumbnailUrl" alt="Many cups!" />
</div>
}
However, what I have been trying to do is stack the images horizontally on one row. And if it overflows (which it nearly always will do) then to display with a horizontal scroll bar.
I guess I would handle the overflow in CSS, but I am unable to work out how to stack the images in the first place. Can anyone help?
I would use a container with white-space:nowrap and put each pod as inline block:
.container {
white-space: nowrap;
overflow: auto;
max-width: 100%;
}
.wrapper {
display: inline-block;
white-space: normal;
}
<div class="container">
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
</div>
I just started learning coding and I decided to design my website using squarespace and www.rociodelfa.com.
My main problem is that on my inspiration page I have a gallery of images that need to follow a cohesive order and I want to fix the amount of images per line but it is not the same for every line.
When opened on a mobile device the images are stacked. How do I change that?
Check the code I have attached.
* {
box-sizing: border-box;
}
.wrapper {
width: 20%; /* Let's assume you want 5 pictures in a row, so 100%/5 = 20% */
float: left;
padding: 10px;
}
.wrapper img {
width: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
I have a 3x3 block of images.
I want the images to be 400px wide and 300px in height.
I also want the images to stretch from edge to edge of the screen and for there to be no space between the images.
This is what it looks like at the moment
This is my current CSS and HTML:
.clear {
clear: both;
}
#grid {
width: 100%;
}
.grid-element {
width: 33.3333%;
height: 200px;
float: left;
}
<div id="grid">
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
<div class="clear">Example taken from grandoch's gist</div>
E. Updated the answer for use with Bootstrap.
Bootstrap adds left and right padding for all col-*-* elements, so you will merely need to remove that padding.
For full viewport width, you will need to use a fluid container, i.e. the container-fluid class.
#grid .grid-element {
height: 200px;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="grid" class="row">
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
</div>
I want to get the grid system to center but it won't, i was thinking maybe it has something to do with my pictures' border?. here's the screen shotwhat it is right now
what i want it to be
HTML:
<div class=" container">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS:
.optionBorder
{
border: 1px solid #f5f5f5;
height: 130px;
width: 130px;
line-height: 130px;
text-align: center;
}
Take another element before row with some width and make them center
for example.:
HTML
<div class="test">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS
.test {
width: 450px;
margin: auto;
margin-bottom: 15px;
}
bootply
<style>
.paraentCont{
width:100%;
max-width:300px;
margin:auto;
}
</style>
<div class=" container">
<div class="paraentCont">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
Give to .row fixed width such as 700px, and margin-left/right auto
look at this example http://www.bootply.com/GFDHc6p5tg
Actually here is there right way to go while using Bootsrap
Use the predefine class text-center
Use q Bootstrap helper like .inline-block{display: inline-block}
.inline-block{display: inline-block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" container">
<div class="row text-center">
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>