Having trouble with the image resizing in Bootstrap 5 on Safari?

I am facing an issue with a website:

There are four images under the section "Serviceangebote" that appear as square icons representing circles. I have no trouble viewing them correctly on Windows (Chrome, Firefox, Edge) and Android devices. The images are always properly scaled and displayed as round circles.

However, when I view the website on Safari (desktop Mac and iPhone), the images do not display correctly. They are scaled improperly and appear as extreme ovals instead of circles as intended.

What could be causing this issue?

htmlcsstwitter-bootstrapsafaribootstrap-5

Answer №1

It appears that the image on your website is being stretched due to flexbox settings. Have you tried using align-self: center; to correct this issue? If not, consider adding object-fit: contain to ensure the image maintains its aspect ratio:

.card-img {
  object-fit: contain;
}

Alternatively, you can enclose the <img> tag within an additional div:

<div class="card">
  <div> <!-- an additional div -->
    <img />
  </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

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

jqueryhtmlcss

Creating a Stylish ExtJS Container with CSS: A Step-By-Step

I've been experimenting with the ExtJS properties cls, bodyCls, and componentCls but unfortunately, I'm not achieving the desired outcome. As an illustration: Ext.create('Ext.form.Panel', { renderTo: document.body, title: &apo ...

cssextjs5cls

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

htmlcss

Unlocking the full potential of Bootstrap with the colspan feature

I'm currently in the process of developing an Angular 2 and Bootstrap application. Here's a snippet of my code: <div class="panel-body"> <table class="table table-striped table-bordered" style="width:100%;"> < ...

csstwitter-bootstrapangular

Safari failing to show SVG at correct alignment

I am looking to implement a unique feature on my website where image placeholders are displayed for 1 second before fading out to reveal the actual image. These image containers will be responsive, adjusting to fit the size of their parent container. In a ...

cssgoogle-chromesvgsafari

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

javascriptcssangularjsangular

Navigating dynamic URLs with various URI segments in cPanel

<a href="www.mysite.com/index.php?information/adminpanel/<?php echo $id;?>" name="approve" id="approve" ">Approve >></a> After redirecting to the specified URL, the correct ID is displayed in the address bar but unfortunately, ...

phphtmlurlopencartcpanel

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

cssangularionic-frameworkionic3

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px? Take a look at this JSfiddle for reference. HTML: <table> <tr> <td class="fixed-width">Fixed width col ...

htmlcsshtml-table

Should we still be using <input type="date" /> in 2021?

I've come across some old articles cautioning against using , but they were written a couple of years ago. I'm wondering if it's safe to use in 2021 without negatively impacting the user experience. ...

htmlreactjs

What is the best method for positioning span content above all other elements without having it wrap around them?

Each form element on my page is accompanied by a span that displays an error message, if applicable. The layout consists of two columns: left and right. I am struggling to make the span display seamlessly from the left column all the way across the page wi ...

htmlcss

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

I'm in the midst of a project that involves using the electron framework. Within my project, I have an HTML file, a CSS file, and a Javascript file. The issue at hand is that when I hover over a button, the expected hand pointer icon fails to appear d ...

javascripthtmlcsselectronaddeventlistener

What are some ways to design a side-by-side arrangement of an image and a label?

I've been attempting to achieve the design shown below, but have been unsuccessful so far: https://i.sstatic.net/N9jGH.png .exploreItem { background-color: #353258; /* rgba(31, 31, 31, 1) */ border: 1px solid #4152F1; color: white; /* pa ...

htmlcsslayout

Differentiating between inline and block elements in HTML5

Can you explain the various categories of inline and block elements in html5? I'm having trouble distinguishing between the different types of inline and block elements in html5. ...

html

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

Currently, I am utilizing basic form validation to ensure that the email entered is in the correct format. Once validated, the data is sent via Ajax for further processing. During this process, I also check if the email address is already in use and whethe ...

javascriptformshtmlvalidationtooltip

The most recent version of Bootstrap is experiencing issues with responsiveness in the navbar

I have set up Bootstrap as follows: "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "bootstrap": "^4.0.0-beta" Now, I wanted to add a navbar, so I created the following code: <nav class="navbar navbar-toggleable-md navbar-light bg-faded" *ngIf="! ...

twitter-bootstrapangularbootstrap-4ng-bootstrap

What could be causing the tabs to disappear from the Material UI tab component in my React project?

What am I currently working on? I am in the process of developing a horizontally scrollable tab component to select dates within a month For this project, I have decided to utilize the Material UI library Issues Encountered The dates before the 14th Sun ...

cssreactjsmaterial-uitabs

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

Can anyone help me figure out what I'm doing wrong here? Essentially, I am trying to open a PDF in Google Viewer: <a id="pdflink" href="https://docs.google.com/viewer?url=http://pdpdpd.pdf" target="_blank">Pdf</a> When it opens in the vi ...

javascripthtmlcordovapdfexternal

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

javascripthtmlcssimagelayout

Guide to capturing and playing audio on iOS6 with HTML5

Our team is currently working on a web application using HTML5 and Javascript. We are facing a challenge with implementing voice recording functionality, as the Wami Api we tried is not compatible with iPad due to its use of flash for recording. Could yo ...

javascriptjqueryhtmlios6