Question 260007 in CSS Question posted in
Some basic documentation can be found here.

Css – min/max width and object-fit:cover

I have 2 images with both 100vh and 50vw, I also have the object-fit:cover, everything works, but when a picture is smaller than a certain size the other one gets bigger, i tried adding

min-width: 1000px
max-width: 1100px
to my code but then object-fit: cover doesen’t work, so when i zoom out it leaves a gap at the end.

For context, some of my images are < 1000px in width so when they appear it leaves a gap at the right end of the page

Is the only way to fix this to get images > 1000px?

here is my code:

#item1 { 
  width:50vw; 
  height:100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1000px; 
  object-fit: cover; 
}

#item2 { 
  width:50vw; 
  height:100vh; 
  margin: 0; 
  padding: 0; 
  min-height: 973px; 
  min-width: 1000px; 
  object-fit: cover; 
}

#item1, #item2 {
  filter: brightness(50%);
}

.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Media query was not working so if anyone is facing the same problem here is what I did:

    #item1,
#item2 {
  flex: 1;
  min-width: 50vw; 
  height: 100vh;
  object-fit: cover;
  filter: brightness(50%);
}

#item1, #item2 {
  filter: brightness(50%);
}
.the-images { 
  display: flex; 
  position: absolute; 
  z-index: 10; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
height: 100vh;
width: 100vw; 
overflow-x: hidden; 
}

    I added flex: 1 to distrubute space between images, instead of adding min-width in px i added it in vw and it worked, don't forget to set your image container to width: 100vw and height: 100vh


  2. 0

    When you set a min-width that is larger than the original image size, the image will stretch, and object-fit: cover won’t work as expected.

    You can try media queries to set different styles for different screen sizes, as per the CSS below:

    
@media screen and (min-width: 1000px) {
  #item1, #item2 {
    min-width: 1000px;
  }
}

@media screen and (max-width: 999px) {
  #item1, #item2 {
    min-width: auto;
  }
}

    Or if you’re up to it, Use JS to dynamically set min-width, but try the CSS first.

    Edit: The most foolproof way would be to ensure that all your images meet the minimum width requirement of 1000px before using them, which is a pretty simple process using paint 3d or whatever.

    Login or Signup to reply.
  3. 0

    You can use media query and set checkpoint of size that you want your element get changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search