0

I have an image that has a size of 620 x 250 pixel. The Height of the image(250px) should always be 250px even on different breakpoints, but the width of the image can adjust depending on the window size. I want to automatically crop the image on left and right side on different break points. I am able to do this using the object-fit: cover; but I realized that Internet Explorer and Edge don't support this. I tried to follow the css similar to what's mentioned here:IE and Edge fix for object-fit: cover; but still I am having not much success.

Is there a way to crop the image left and right on any browser through JavaScript if Not CSS?

Here is my CSS and HTML:

HTML

<div class="imageBox">
  <img class="theImage" alt="my image" src="..."/>
</div>

CSS

.theImage {
    max-height: 250px;
    min-height: 250px;
    width: 98%;
    object-fit: cover; // DOES NOT work in Internet Explorer or Edge.
}
  • Check in this post (similar post) [https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover](https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover) – microb14 Dec 10 '20 at 08:12
  • @microb14 Yes I already mentioned that in my question, but that didn't work for me. –  Dec 10 '20 at 08:19
  • ok. i didn't see that. – microb14 Dec 10 '20 at 08:34
  • and with this https://stackoverflow.com/questions/41226895/alternative-option-of-object-fitcontain-for-ie – microb14 Dec 10 '20 at 08:35

0 Answers0