I'm trying to make a layout with two columns. On the left side is one image, and on the right side the image should be half the height of the image on the left but still take up the full width of the screen. I cant seem to make the image on the right side 50% of the height of the one on the left. The margin on the top is to clear space for a fixed header.
.col {
margin-top: 80px;
width: 100%;
float: left;
}
.row-l {
width: 60%;
}
.row-r {
width: 39.5%;
height: 50%;
}
<div class="col">
<img class="row-l" src="cover.jpg" style="max-width: 100%;">
<img class="row-r" src="phone.jpg" style="max-width: 100%;">
</div>
I advice you to go with a flex layout and use the images as a background like this:
* {
box-sizing: border-box;
}
.col {
margin-top: 80px;
display: flex;
height: 40vh;
border: 1px solid;
}
.row-l {
width:60%;
background-size: cover;
background-image:url("https://lorempixel.com/400/400/");
}
.row-r {
width:40%;
background-size: cover;
background-image:url("https://lorempixel.com/400/500/");
height:50%;
margin-top:auto;
}
<div class="col">
<div class="row-l" ></div>
<div class="row-r"></div>
</div>
Related
I am trying to accomplish placing two parallax background-images side by side while keeping their aspect ratio. The issue I am running into is that each image appears to be getting cut in half vertically. I have tried using different values in both background-attachment and background-size to no avail. Removing background-attachment: fixed; from the code below fixes the aspect-ratio issue but loses the parallax effect. Does anyone know how to accomplish both simultaneously?
.image-left {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="image-left"></div>
<div class="image-right"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
Fiddle for above code here.
I have also attempted to use the jQuery function from this post but was unable to get it to work with side by side images. (see fiddle)
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
As others pointed out, I don't think you can achieve your goal via background images...
So I tried another approach that consists basically on:
- Having two sections: one for the images, another for the content.
- As for the images, wrap them into an element and use position fixed. They are positioned at the very top of the element, should you want to change this, you can play with top property.
- As for the content, both regions are also wrapped in a container with position absolute.
- The content at the bottom will be responsible for the 'breathing' space in the images, so, you need to play with margin-top to achieve desired results.
Some considerations:
- The given example works at the moment only on desktop, tested on fulls screen laptop (around 1680px width).
- If you shrink the screen, everything goes really bad, thus, you will need to adjust all measures for mobile via media queries.
- The bottom element have a min-height attribute just for demonstration purposes.
All given, I'm not quite sure if this is something I would recommend.
Can you actually merge both images into one? This way, you can just use the background approach, and this development would not be needed.
What I don't like about my approach, is that it contains a lot of fixed values on positions, and eventually, this would introduce maintainability issues.
I hope it helps!
.image-wrapper {
position: fixed;
top: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.image {
width: 100%;
}
.content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.content-bottom {
margin-top: 300px;
min-height: 1000px;
}
<div class="image-wrapper">
<img class="image" src="https://www.gstatic.com/webp/gallery/1.webp">
<img class="image" src="https://www.gstatic.com/webp/gallery/2.webp">
</div>
<div class="content-wrapper">
<div class="content">
<h1>Lorem</h1>
</div>
<div class="content content-bottom">
<h2>Ipsum</h2>
</div>
</div>
As avcajaraville pointed out, the best approach is to have a container for the images with position fixed.
Here is my solution, using this idea, but working without needing size adjustments
Note that since now the images cover only half the width of the screen, they will cover also half the height. This could be fixed having images in portrait mode. To get a more nice result with the current images, I have added another row of images, now with the order reversed (visible only for some screen ratios)
.images {
position: fixed;
width: 100%;
z-index: -1;
}
.images div {
display: inline-block;
width: 49%;
margin: 0;
height: 500px;
background-position: center;
background-size: cover;
}
.image-left {
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.filler {
height: 500px;
}
<div class="images">
<div class="image-left"></div>
<div class="image-right"></div>
<div class="image-right"></div>
<div class="image-left"></div>
</div>
<div class="content">
<h1>Lorem</h1>
</div>
<div class="filler"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
.flexrow {
display: flex;
flex-flow: row wrap;
}
.flexrow > .image {
flex: 0 1 50%;
min-height: 350px;
background-size: 100%;
}
.img1 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}
.img2 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="flexrow">
<div class="image img1"></div>
<div class="image img2"></div>
</div>
<div class="content">
<h1>Ipsum</h1>
</div>
think this is what you're looking for, remember that min-height property on images may break this aspect ratio when no space are available (on resize, low res).
I'm trying to figure out a way of making the image div having and keeping an aspect ratio of 3:2 with different web browser sizes (for mobile responsiveness etc). I want to be able to re-size my browser window and the image to always have a 3:2, so I want the image height to also re-size.
Is there any way of achieving this with my current code? I'd also like to be able to make the blue text div smaller without having to make the image above bigger, because if I reduce the height percentage of the blue div, I'll have to increase the picture div above to make up the 100% parent element's height, but this will throw the aspect ratio of the picture div out.
I'm not sure how to achieve this as it's more confusing than I thought.
Appreciate any help, thanks...
#bg {
width: 100%;
height: 300px;
background: yellow;
}
#window-container {
width: 30%;
height: 200px;
background: orange;
}
#img {
background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
height: 67%;
width: 100%;
background-size: cover;
background-position: center;
}
#text-wrap {
background: lightblue;
width: 100%;
height: 33%;
}
<div id="bg">
<div id='window-container'>
<div id='img'></div>
<div id='text-wrap'>text here</div>
</div>
</div>
May this be what you want?
#bg {
width: 100%;
background: yellow;
display: table;
}
#window-container {
width: 30%;
background: orange;
display: block;
}
img {
width: 100%;
height: auto;
}
#text-wrap {
background: lightblue;
padding: 10px;
}
<div id="bg">
<div id='window-container'>
<img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
You can do it with the img element and Flexbox:
#bg {
background: yellow;
}
#window-container {
display: inline-flex; /* only takes the contents width */
flex-direction: column; /* stacks children vertically */
background: orange;
}
#text-wrap {
background: lightblue;
}
img {
display: block; /* removes bottom margin/whitespace */
/*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
<div id="bg">
<div id='window-container'>
<img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
I'm a newbie, and I've quickly gotten in over my head:
I'm trying to create a pattern I can re-use throughout my site:
two photos, side by side, each with watercolor splashes peeking out from behind them.
They should scale appropriately down to the smallest screens (I'm pretty agnostic about whether they wrap or not on tiny screens).
Here's my code:
.two-pics {
width: 100%;
}
.wc-pic-blue {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
background-size: contain;
background-repeat: no-repeat;
float: left;
padding: 4%;
}
.wc-pic-pink {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
background-size: contain;
background-repeat: no-repeat;
float: right;
padding: 4%;
}
<div class="two-pics">
<div class="wc-pic-blue pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
</div>
<div class="wc-pic-pink pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
</div>
<br style="clear: left;" />
</div>
My instinct was to wrap two Divs (identical but for their source images) with background images (the watercolor splashes) inside a parent Div, then stick images within each of the child Divs — and I tried to center the images (both vertically and horizontally) within each of the child Divs, so the watercolor splashes would be equally visible on all sides;
By some miracle this actually worked — mostly — but I was finding weird phantom space when I inspected the page; the inner images were never quite centering correctly within their watercolor Divs.
There's also weird stuff happening upon scaling :(
I'm desperately confused — should I be using Flexbox? Nested Divs with background-images?
Here's my Fiddle if anyone is feeling brave and generous :)
Any help would be so appreciated!
Here's a solution with the following features:
flex layout
viewport percentage units for sizing the images
absolute positioning to center one image over the other
media query for vertical alignment on smaller screens
.two-pics {
display: flex;
justify-content: space-around; /* 1 */
}
.pic {
position: relative;
}
img:first-child {
height: 30vw; /* 2 */
}
img:last-child {
height: 25vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 3 */
}
#media (max-width: 600px) {
.two-pics {
flex-direction: column;
align-items: center;
}
}
<div class="two-pics">
<div class="pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-s.jpg" alt="">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg" alt="">
</div>
<div class="pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg" alt="">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg" alt="">
</div>
</div>
https://stackoverflow.com/a/33856609/3597276
https://stackoverflow.com/a/32174347/3597276
https://stackoverflow.com/a/36817384/3597276
Revised Fiddle
I centered the images on the screen by aligning the left div right and solved the scaling problem. I also added a #media query for smaller screens, it looks very fine.
Improved Fiddle
.two-pics {
width: 100%;
}
.wc-pic-blue {
width: 49%; /* decrease for more space between images */
box-sizing: border-box;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
float: left;
padding: 4%;
text-align: right;
}
.wc-pic-pink {
width: 49%; /* decrease for more space between images */
box-sizing: border-box;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
background-size: contain;
background-repeat: no-repeat;
float: right;
padding: 4%;
}
.two-pics .pic img {
max-width: 100%;
}
#media (max-width: 500px) {
.two-pics .pic {
width: 100%;
padding: 8%;
}
.two-pics .pic img {
width: 100%;
}
}
<div class="two-pics">
<div class="wc-pic-blue pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
</div>
<div class="wc-pic-pink pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
</div>
<br style="clear: left;" />
</div>
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}