The image inside a scrollable div with overflow y appears distorted in Chrome and Firefox, but not in Safari

I am facing an issue with displaying a long image in a container with a scroll bar. Currently, I have a container called "work-sample" with a project-container that holds the image. The image appears fine in Safari, but in Chrome and Safari on Macs, it is getting compressed together.

#work-sample {
  flex: 1 3 auto;
  flex-basis: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 400px;
  position: relative;
  overflow-y: scroll;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.project-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  object-fit: cover;
}

#project-long {
  width: 100%;
  height: 100%;
  text-align: center;
}
<div id="work-sample" class="work-sample">
  <div class="project-scroll">
    <img id="project-long" src="../media/incompatible-image.png">
  </div>
</div>

htmlcssflexbox

Answer №1

Within the class for the image, there is a height parameter set to 100%, causing distortion as it forces the image to conform to that specific height. The following code snippet rectifies this issue by removing the height setting, allowing the image to adjust its height automatically and maintain its aspect ratio.

#work-sample {
  flex: 1 3 auto;
  flex-basis: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 400px;
  position: relative;
  overflow-y: scroll;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.project-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  object-fit: cover;
}

#project-long {
  width: 100%;
 /* height: 100%; REMOVED */
  text-align: center;
}
<div id="work-sample" class="work-sample">
  <div class="project-scroll">
    <img id="project-long" src="https://picsum.photos/id/1015/200/600">
  </div>
</div>

Answer №2

It seems like the problem arises because the CSS property object-fit, which should be applied to the img tag itself, is currently on the parent element.

#work-sample {
  flex: 1 3 auto;
  flex-basis: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 400px;
  position: relative;
  overflow-y: scroll;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.project-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

#project-long {
  width: 100%;
  height: 100%;
  object-fit: cover; /* this property moved from .project-scroll */
  text-align: center;
}
<div id="work-sample" class="work-sample">
  <div class="project-scroll">
    <img id="project-long" src="https://generative-placeholders.glitch.me/image?width=1200&height=500">
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

I'm struggling with converting my document from the DOM 0 Event model to the DOM 2 Event model standards. I've tried getting help from different tutors on Chegg, but no one seems to have a solution for me. Hoping someone here can assist me!:) P. ...

javascripthtmleventsdommodel

CSS code to create a single content bar flanked by two sidebars

I have been working on a beginner-friendly webpage and have managed to style it using CSS to some extent. My goal is to have the content centered with a white background, flanked by two sidebars styled in blue. To work on this page, please visit: The ...

htmlcss

How can you prevent HTML from interpreting the characters '<' and '>'?

I am adding some content through JavaScript using innerHTML in a label, but nothing is showing up. I am retrieving data from an API response. { "answer_a": "<footer>", "answer_b": "<section>", ...

javascripthtmldictionary

Using Chrome in Application Mode with Shortcuts Disabled

When trying to utilize Chrome in application mode as a host for an HTML5 application, it becomes evident that there are significant limitations. For instance, pressing CTRL+T launches a new Chrome browser window, allowing the user to input text into the a ...

htmlgoogle-chrome

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

javahtmlcssxpathselenium

Aligning checkboxes in Vue.js: Centering checkboxes inside table cells

Having trouble with aligning checkboxes in a Vue.js application. I want them centered within their table cells, but they keep aligning to the left. When I apply CSS styling to center them, they all unexpectedly align vertically to the leftmost column of th ...

htmlcssvue.js

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

javascriptjqueryhtmlcss

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

<table id="example" class="row-border compact" style="width:1000px; table-layout:fixed;"> The table is currently set to have a width of 1000px, but I would like it to be 90% of the screen width when the window size is less than 1000px. Is it possibl ...

htmlhtml-tabledatatable

What is the best way to center align my button using CSS?

I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...

css

Should the HTML inputs be positioned within the label or placed outside of it?

Check out this site for some on/off switches: <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> < ...

csscheckboxlabel

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Creating a Custom Emoji Module

Currently working on creating an emoji component using JavaScript without the React framework. Does anyone know of a comprehensive list containing the unicodes for all emojis? I can successfully display an emoji on the screen by using its Unicode (e.g. & ...

javascripthtmlhtml-listsemoji

switching brand and toggle in the bootstrap navbar

I am looking to rearrange the brand and toggle button on mobile view if the screen size is small enough. The brand icons should be on the right side in desktop view, while the links should be displayed normally. Examples: Desktop: +--------------------- ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navbar

What methods can be used to create a universal JS function for popup windows?

How can I create a more flexible code structure? I have successfully implemented the functionality using the following approach: let popup1 = document.getElementById("popup-1"); function openPopup1() { popup1.classList.add("open-popup& ...

javascripthtmlbuttonpopuppopupwindow

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

htmlcss

Struggling to replicate Bootstrap's col-md-6 with Tailwind CSS in React?

How can I make my box/form appear in the center of the screen with its width filling half or all of the screen? I've attempted using the w-full class on different elements but haven't been successful in adjusting the width. I am working with rea ...

cssreactjstailwind-css

Tips for positioning a text link alongside an image link within a table row using only inline styles

I am struggling to align text and an image link next to each other within a table row. The image keeps moving up and down despite my efforts to use various alignment and display block styles. I am only able to use inline CSS and need it to display correctl ...

htmlcssemailoutlook