i'm trying to stack 3 images inside a container so they appear on top of each others.
My issue is i don't know the image size and i want my container to be equal to the tallest height. I also don't want to use javascript.
Here is a fiddle that demonstrate the expected result and is actually a solution to my problem but only works on Chrome !
http://jsfiddle.net/TnVVa/
here is the html part of it :
<div class="container">
<div class="img-container">
<img src="firstImage.jpg"/>
<img src="secondImage.jpg"/>
<img src="thirdImage.jpg"/>
</div>
<div class="text">
This is my text
</div>
</div>
i'm looking to have the same result on other browsers (at least firefox and IE10+, if more thats better)
As a bonus it would awsome to have the 3 images be vertically centered in their container.
Related
I have been developing a website with 3 rows.
The rows change in height, depending on which one is selected (let's say 20vh when not selected and 40vh when selected).
Inside the rows are blocks containing images like this:
<div class="row">
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
<div class="block">
<div class="image-wrapper">
<img />
</div>
</div>
...
</div>
My problem is making the images keep a good aspect-ratio in Safari when the rows are changing height.
In other browsers I have used the aspect-ratio css property, but it is only supported in the latest version of Safari, which I cannot just assume everyone will have.
The other trick would be the "Netflix padding trick", where you put a padding-bottom to have the right height for your images. Unfortunately this trick doesn't seem to work when applied the other way around, with a 100% height and a padding-right. The blocks end up being 0px wide.
I also tried to make the <img> height:100% and width: auto, but then the width is set perfectly for 20vh, and not adapted when parent changes to 40vh.
Here is a codepen, without the aspect-ratio attribute, which allows you to see the problem even on Chrome or Firefox: https://codepen.io/laurapiccolo/pen/KKXxYrj
Does anyone have any idea how to fix this?
Thanks!
I've read a lot of articles describing how to center a img bigger than the div container. But I also need to scroll that image horizontally (specially for mobile devices) and I cannot explain myself the behaviour I get and how to fix it.
I use flex (through bootstrap classes):
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img src="image_bigger_than_div"/>
</div>
<section>
Additionnal css:
.for-mobile img { flex:none }
The image is well centered and I can scroll on the right side but I cannot scroll on the left side. If I change the flex direction to row reverse, the opposite behaviour occurs.
Why? How to fix this please?
Thx
NB:
If I don't "justify-content: center", the img is not centered and I can scroll the full image.
The code is working fine to me I had to close the section tag just as shown in the code snippet.
I also added class img-fluid to the image to make it responsive but if you want to scroll just remove that class.
<section id="container">
<div class="for-mobile d-md-none d-flex overflow-auto justify-content-center">
<img class="img-fluid" src="assets/images/image.jpg" />
</div>
</section>
And I was able to scroll right and left without any problem...
I also believe the CSS code you provided is not needed.
I've asked similar question here: CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first), but that's one is more difficult, I find out that I can't use overflow hidden for it because there are popup in elements. Here description: I have several containers and need shrink only first div if not enough space for all of them, here example which works perfectly for me in Firefox and Chrome, but not in IE: https://plnkr.co/edit/Fg5P96r75soAVlDUf1LG?p=preview:
<div class="container">
<div class="container2">
<div class="first">first div content</div>
<div class="second">second div content</div>
</div>
<div class="third">third div content</div>
</div>
Is there any simple solution to fix it in IE 11?
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.