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?
Related
before anything: No I don't mean centering an image inside a div
WHAT I WANT TO DO IS SIMILAR TO THE DESKTOP 'CENTER' OPTION HENCE THE TITLE PLEASE DON'T BE CONFUSED I JUST DON'T KNOW THE SUITABLE TERM OF WHAT I WANT
I am making a certian css template for my use, but I have this question that I couldn't figure out ..
basically, there is an image before each post, so the width is known. I set it to 100% of a container called "post". post has a width of 75% of the browser
<div class="post">
<h1>post title</h1>
<img class="post-img" src="myImg.png" />
<!--other elements-->
</div>
css:
.post {
width: 75%;
.post-img {
max-width: 100%;
}
Now to the problem ..
although the width now is fixed regardless of the image, the height is pretty much automatic
I want to set the height to a certain value, like max-height: 500px; for example .. so when a picture is big:
make width = 100% of the post div
is the height > 500px? no then make it auto. yes then crop the extra part
an image
as you can see, the black stroke is the limited width and height
the width was checked first so no extra parts to the left and right
the height is more than 500px, so it will be cropped and the viewed image would be the one inside the black frame
Like i said overflow:hidden; is the one you need
.container{
width: 700px;
}
.post {
width: 75%;
overflow:hidden;
border:2px solid #f63;
}
.post img{
max-width: 100%;
}
<div class="container">
<div class="post">
<h1>post title</h1>
<img class="post-img" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" />
<!--other elements-->
</div>
</div>
What you are trying to achieve may be something like that, using background instead of <img>, so you have a much more simple control on the image :
.post {
width: 75%;
}
.container {
width: 100%;
height: 500px;
overflow: hidden;
background: url('https://s3-eu-west-1.amazonaws.com/hasselblad-masters/web-hi-res-content/X1D-Sample-Images/X1D5_B0001993.jpg') center no-repeat;
background-size: cover;
}
<div class="post">
<h1>post title</h1>
<div class="container">
</div>
<article>
<p>Other content</p>
</article>
</div>
I think what you need is to wrap your image in a container and set the maximum sizes and overflow:hidden; on that container
Something like:
<div class="post">
<h1>post title</h1>
<div class="img-container">
<img class="post-img" src="img.jpg" />
</div>
</div>
<style>
.post {
width: 75%;
}
.img-container {
max-width: 100%;
max-height: 100px;
overflow: hidden;
}
</style>
First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.
I'm aiming for a page with a collage of 4 photos;
a large one on the left taking up 50% width of the page and 100% of the height.
3 smaller photos, each taking up 50% of the width of the page but 33% of the height.
I'm running into problems with the larger image though,
my current CSS is;
.container {
width: 50%;
height: 100%;
overflow: hidden;
-size: cover;
}
and my html;
<div class="container">
<img height="100%" width="100%" src="jpg"></img>
</div>
the image's 50% width is fine but the height is only 50%.
It's a large image(4k) and my aim was to have overflow:hidden so that it fills the container but it's not working.
How could I do this?
Edit:
I'm aiming for it to be similar to this website:
http://www.masitupungato.com/
Suggested Solution
In fact, it is the easiest solution
Use two different divs, one for the left side and the other for the right side.
The left side div takes the half of the container width, and contains a image
The right side div takes the half of the container width, and contains 3 different divs, each one takes 33% of this right div height, and contains an image.
Use the CSS below:
.container {
width: 250px;
height: 250px;
margin: auto;
}
#left {
width: 50%;
float: left;
height: 100%;
}
#right {
width: 50%;
float: left;
height: 100%;
}
.right-inner{
width: 100%;
height: 33%;
}
.left-inner {
width: 100%;
height: 100%;
}
Expected output
Check it out.
You might change the height of the biggest image to fit the window of the device. Try to to set its height to "100vh", maybe it is what you were looking for.
you can use display:flex; property for this purpose. it will resolve your issue dynamically.
<div class="wrapper">
<div class="big-image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="small-image-wrapper">
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
here is the fiddle https://jsfiddle.net/d95hw8fq/
I have an img in a container. I have given the image width: 100% and now I want to set a max-height for the image without resizing it.
I tried adding max-height: 120px; overflow: hidden; but it is not working.
Why can't I crop the image to be 100% width and 120px height from top?
Demo:
https://jsfiddle.net/DTcHh/14727/
HTML:
<div class="row">
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
</div>
CSS:
img{
width:100%;
max-height:120px;
overflow:hidden;
}
You will need to wrap the image in a div. Use the same css on a div and it should work.
Well, if you set the max-height to 120px it's not going to go over that, which is why the image is resizing. I'm not too sure what you're looking for here?
This may help you out: https://jsfiddle.net/uxp1cbto/
img
{
width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
}
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