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>
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'm trying to scale two images to fit a mobile screen with both keeping their original proportions without overflow. When I've tried to apply max-width it only kicks in when one image falls below screen width.
.one img {
position: absolute;
width: 200px;
height: 200px;
}
.two img {
position: absolute;
margin-left: 200px;
width: 300px;
height: 200px;
}
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
Try:
* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
}
.slider .slide img {
width: 100%;
}
<div class="slider">
<div class="slide">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png" style="max-width: 200px;">
</div>
<div class="slide">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"
style="max-width: 300px;">
</div>
</div>
Check this:
.container {
display: flex;
}
.one img {
width: 100%;
max-width: 200px;
}
.two img {
width: 100%;
max-width: 300px;
}
<div class="container">
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
</div>
.one, .two {
width:50%; float:left
}
.one img, .two img {
width: 100%;
}
<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
Can you please check this and let me know, if this is the same you are looking for.
I can't manage to get the image to fit 100% to the height of a css made table. As you see below, the table and image is totally ignoring the parent element's dimensions.
Everything needs to be dynamically that's why I work with percent.
.img {
max-width: 50%;
height: 100px; // <-- This should be able to be dynamic ( anything )
}
.img .table {
display: table;
width: 100%;
height: 100%;
}
.img .row {
display: table-row;
}
.img .cell {
display: table-cell;
}
.img .row.img-el,
.img .row.img-el .cell {
height: 100%;
}
.img img {
max-width: auto;
height: 100%;
}
<div class="img pull-left gap-right bigger">
<div class="table">
<div class="row img-el">
<div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="height:100%;float:left" /></div>
</div>
<div class="row">
<div class="cell img-text">Hello</div>
</div>
</div>
</div>
Expected result:
Update: Is it possible to fix it with flex in any way?
Is this what you need?
.img {
max-width: 50%;
max-height: 100%;
}
.img .table {
display: table;
width: 100%;
height: 100%;
}
.img .row {
display: table-row;
}
.img .cell {
display: table-cell;
}
.img .row.img-el,
.img .row.img-el .cell {
height: 100%;
}
.img img {
max-width: auto;
height: 100%;
}
.cell img {
width: 100%;
height: auto;
}
<div class="img pull-left gap-right bigger">
<div class="table">
<div class="row img-el">
<div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="float:left" /></div>
</div>
<div class="row">
<div class="cell img-text">Hello</div>
</div>
</div>
</div>
you have to give it a specific height like 200px it cant take a height of 100% of nothing. If you had a box with the height of 200px; you can make the image height be 100% which is 200px
I am trying to find a solution without having to use background-image, but being able to use an inline <img>.
I would like to make it so that if the image container's dimensions are not the same as the image, the image will still fill the width and height of the container, cropping whatever part it has to.
Also, if a part of the image is smaller than the container, it will stretch over 100% to fill the container.
In the example below, I have a huge image that can easily fill the width and height of the container. The container is a different aspect ratio from the image, so I end up with blank space, either horizontally or vertically. I want to fill that container no matter what, even though part of the image will be cropped away.
class[*='container'] {
margin-bottom: 50px;
}
.container img {
width: 20%;
height: 20%;
}
.container-1 {
background: #f0f0f0;
width: 400px;
height: 150px;
}
.container-1 img {
object-fit: cover;
max-width: 100%;
max-height: 100%;
}
.container-2 {
background: #f0f0f0;
width: 150px;
height: 400px;
}
.container-2 img {
object-fit: cover;
max-width: 100%;
max-height: 100%;
}
<p>Original image:</p>
<div class="container">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
<p>Container 1:</p>
<div class="container-1">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
<p>Container 2:</p>
<div class="container-2">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
.container-1 img {
object-fit: cover;
/* max-width: 100%; */
/* max-height: 100%; */
width: 100%;
height: 100%;
}
class[*='container'] {
margin-bottom: 50px;
}
.container img {
width: 20%;
height: 20%;
}
.container-1 {
background: #f0f0f0;
width: 400px;
height: 150px;
}
.container-1 img {
object-fit: cover;
width: 100%;
height: 100%;
}
.container-2 {
background: #f0f0f0;
width: 150px;
height: 400px;
}
.container-2 img {
object-fit: cover;
width: 100%;
height: 100%;
}
<p>Original image:</p>
<div class="container">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
<p>Container 1:</p>
<div class="container-1">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
<p>Container 2:</p>
<div class="container-2">
<img src="https://themetry.com/wp-content/uploads/pug.jpg" />
</div>
Since you're already using object-fit, I used it in my answer, as well. Just keep in mind it's not supported by IE / Edge. Here are some workarounds: https://stackoverflow.com/a/37127590/3597276
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/