Using media queries in CSS - css

Question

I'm working on a Shopify theme and wanted to add a media query to only the carousel images when viewport is under 1024px. Right now the images are 100% width and height and cropping on the left and right. I don't want the image to crop so I don't want to apply anything to the height.
This is the code from the theme:
.objFit {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: 'object-fit: cover;object-position:center;';
}
}
And this is what I'm assuming I should add.
#media(max-width: 1023px) {
.objFit {
width: 100%;
position: relative;
overflow: hidden;
img {
display: block;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
font-family: 'object-fit: cover;object-position:center;';
}
}
}
I tried to switch the height and width so width came first but it broke the carousel.
I can't seem to get the preview to work to test my code so wanted to ask here first.

Answer 1

You can keep the height: 100% on both elements. Simply change cover to contain in your media query. You also do not need to repeat rules that remain the same in your media query.
I added two examples, one for a landscape orientation image and the other for portrait, so you can see what happens.
Here is the documentation on object-fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.objFit {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#media (max-width: 1023px) {
.objFit img {
object-fit: contain;
}
}
<div class="objFit">
<img src="https://via.placeholder.com/900x300">
</div>
<div class="objFit">
<img src="https://via.placeholder.com/300x900">
</div>