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/
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>
I'm wanting to make my images smaller as the window size gets smaller.
However, I have to define the size of these two images by width, yet because 'max-width' overrides 'width' then it makes the images really small? I need to use 'max-width' to resize my images. However, I have two images on the left hand side that I have used both width and max-width and its width is defined and it resizes? What am I doing wrong with the other two?
img {
width: 100%;
height: auto;
width: auto\9;
}
/* css for the two larger images on the left-hand side*/
#imageleft {
display: inline-block;
height: 30px;
}
/* css for the two smaller images on the right-hand side*/
#imageright {
display: inline-block;
width: 50px;
height: 100px;
}
<!-- large images to left -->
<div id="imageleft">
<a href="index.html">
<img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
</a>
<a href="index.html">
<img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
</a>
</div>
<!-- small images to the right -->
<div id="imageright">
<a href="index.html">
<img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
</a>
<a href="index.html">
<img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
</a>
</div>
#helpme123 I really didn't get what kind of layout you desire to achieve. Could you change your post and provide an example of it, please?
When you use width and max-width together, it's usually because you are giving the element a width relative to its parent (or the viewport or the current font-size or the base font-size), but you also want to explicitly state an absolute width, beyond which the element should not widen.
Working Example:
div {
width: 90%;
padding: 12px;
}
.parent {
max-width: 1000px;
background-color: rgb(255,0,0);
}
.child {
max-width: 600px;
background-color: rgb(255,255,0);
}
.grandchild {
max-width: 400px;
height: 100px;
background-color: rgb(0,0,255);
}
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
If you run the example in a full window and shrink the window size and then gradually grow it, you'll see that the divs each widen relative to their parent... until they reach their max-width, after which they stop widening.
I have some simple html like this:
<div id="container">
<div id="box1"><img src="images1.png" width="100%" /></div>
<div id="box2">Some text</div>
<div id="box3"><img src="image2.png" width="100%" /></div>
</div>
The container is supposed to cover the entire page. I would like box2 to be 20% of the height of the container. The tricky part is that the height of the images in box1 and box3 are relative to the width of the viewport and makes the container larger than the browser window.
If I simply set box2's height in percentage in the stylesheet, the height will be defined as 20% of the height of the viewport, not 20% of the height of the container.
Any suggestions how to solve this?
Thanks in advance.
I believe I've found a solution to my problem: Fiddle example
body, html{
width: 100%;
height: 100%;
}
#container{
position: relative;
height: 100%;
}
#overlay{
position: absolute;
top: 0px;
border: 1px solid red;
z-index: 2;
width: 100%;
height: 100%;
}
#box1{
width: 100%;
}
#box2{
position: relative;
width: 100%;
z-index: 1;
}
#box3{
width: 100%;
}
<div id="container">
<div id="box1"><img src="image_40pct.jpg" width="100%" /></div>
<div id="box2"><img src="image_20pct.jpg" width="100%" />
<div id="overlay">This text is shown above the image.</div>
</div>
<div id="box3"><img src="image_40pct.jpg" width="100%" /></div>
</div>
As I know the sizes of the images in box1 and box3, I can just place an image in box2 with a height that corresponds to 20% of the total height of the three images combined. I then use "position:absolute" and z-index to place a div on top of that image with the height set to 100%. Mission accomplished :)
I've made this Fiddle, maybe you can achieve the 20% of the height by using margins:
#box2{
margin-top: 10%;
margin-bottom: 10%;
}
This way you'll have 10% on top and 10% on bottom, for a total of 20%.
I have an image that is to be used as a background for a series of "slides" that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the background to be 4x screen height. I would also like the image to scale with the screen width. The image is very tall and it does not matter what part of the background is on each slide, so keeping aspect ratios shouldnt be a problem.
The issue i am having is that when i make a window with a width smaller than the images width, part of the image gets cut off instead of scaling to the screen width. My css so far:
#container {
position:relative;
height:100%;
}
#background {
position:absolute;
width: 100%;
height:400%;
background:url(photo.png);
}
.slide {
width: 100%;
height:100%;
position:relative;
}
And the HTML:
<div id="container">
<div id="background"></div>
<div class="slide">
Content 1
</div>
<div class="slide">
Content 2
</div>
<div class="slide">
Content 3
</div>
<div class="slide">
Content 4
</div>
</div>
Note, must be compatible with IE8 and above (ie CSS3 stuff)
Maybe you could use something like that:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
and than in css
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
I dont know why you dont want to use css3, maybe you got some good purpose, but still I'd recommend to use that.
css3 code is :
background-size: 100%;
You can use Css3 property Background-size
#background {
background-size: 100%;
}
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?