Consider the following HTML/CSS:
.container {
width: 100%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg" alt="img" />
</div>
JSFiddle
Is there any way I can vertically center the image in it's container?
.container {
width: 100%;
height: 200px;
overflow: hidden;
object-fit: cover;
}
.container img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
<div class="container">
<img src="http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg" alt="img" />
</div>
Your image is bigger than your container... Is it normal ?
I suggest you to use a background image in this case... (with background-position: center and background-size:cover)
Change css
CSS
div.horizontal {
display: flex;
justify-content: center;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
height: 200px;
overflow: hidden;
object-fit: cover;
}
.container img {
max-width: 100%;
height: auto;
}
HTML
<div class="horizontal container div1">
<div class="vertical">
<img src="http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg" alt="img" />
</div>
</div>
Demo Link http://jsfiddle.net/LWrSD/430/
Related
My HTML is:
<div class="event-presentation-featured">
<div class="event-presentation-featued__image-container">
<a href="...">
<img class="event-presentation-featued__image" src="...">
</a>
</div>
<div class="event-presentation-featured__content">
...
</div>
<div class="event-presentation-featured__actions">
...
</div>
</div>
I want the image to NOT expand the height of the containing div. Presently it looks like:
The relevant classes are:
.event-presentation-featured {
align-items: stretch;
background-color: var(--color-white);
display: flex;
width: 100%;
}
.event-presentation-featued__image-container {
flex-shrink: 1;
max-width: 457px;
position: relative;
}
.event-presentation-featued__image {
top: 0;
left: 0;
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
I´ve been trying to keep my images next to each other on the same line, and just crop them to a smaller size if needed. Why doesn't object-fit work ?
HTML:
<div class="gallery">
<div class="inner"><img src="images/image1.jpg"></div>
<div class="inner"><img src="images/image2.jpg"></div>
<div class="inner"><img src="images/image3.jpg"></div>
</div>
CSS:
.gallery{
width: 1000px;
height: 300px;
display: flex;
}
.inner{
width: 333px;
height: 300px;
}
.inner img{
object-fit: contain;
}
You should set the width and height on the img in order to use it with object-fit. And it looks like object-fit: cover; might be what you're after.
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Full snippet:
.gallery {
width: 1000px;
height: 300px;
display: flex;
}
.inner {
flex: 0 0 33.333333%;
/*or flex: 1; */
/*or width: 33.333333%; */
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="gallery">
<div class="inner"><img src="https://picsum.photos/300/300"></div>
<div class="inner"><img src="https://picsum.photos/400/600"></div>
<div class="inner"><img src="https://picsum.photos/600/400"></div>
</div>
I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
I feel like I may be close and will keep trying but any help will be great!
Thanks
Tom
Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Left image's left indent you can set by change left: attribute, and right image's right indent change right:
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageCentre {
width: 100%;
z-index: 900;
}
.imageLeft {
position: relative;
left: 5%;
}
.imageRight {
position: relative;
right: 5%;
}
.imageCentre {
width: 100%;
}
as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/
nothing change in your code just add this css in your css code. if it's works answer me !
.imageBanner img {
border:solid 5px #000
}
.imageLeft {
text-align:right;
margin-right:-5px
}
I am unable to get one of my images to line up correctly. I have done most of the align vertical-align: middle; and display display: block;options to remove the bottom padding. I have also set the container to width: 100%; as well as the image width: 100%; so it should be responsive. I'm not sure what is causing this image to have the gap. I have set the background color to yellow so it shows the area that needs to be filled in. I have also commented out all of the alternative options I attempted with no success.
Example:
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
/* justify-content: space-between; */
align-content: center;
background: yellow;
}
a .img_item {
width: 100%;
height: auto;
vertical-align: middle;
/* display: block; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: auto; */
}
.img_item_1,
.img_item_3,
.img_item_2 {
width: 33.33%;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
/* display: block; */
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt="">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
The problem is you're trying to fit images of different width to height ratios into boxes of the same size (I say images because it also appears your first top two images have a 1 pixel gap at the bottom.)
Your options are:
Crop all images to the same size at the CMS end.
or
Attach your images as inline background images and in your CSS file set the background-size to cover and background-position to center center. Some other things you'll need to adjust as well. If you're interested in this approach, let me know in the comments and I can edit my answer with a snippet.
EDIT
Background image (for the sake of brevity I only did the one):
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
EDIT 2
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_1,
.img_item_2,
.img_item_3 {
padding-bottom: 22%;
width: 33.333%;
}
.img_item_4,
.img_item_5,
.img_item_6,
.img_item_7 {
padding-bottom: 33.333%;
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
</div>
<div class="img__container">
</div>
<div class="img__container">
</div>
</div>