Is there a way to ensure my circular image maintains its shape when viewed on mobile devices?

On my website, I have circular images implemented using the Bootstrap 4 class rounded-circle. While they appear perfectly round on desktop, they become oval-shaped on mobile devices such as the iPhone XR. You can see the issue in this Codepen link.

Here is how they look on desktop:

https://i.sstatic.net/0C8Z0.png

And here is how they appear on mobile:

https://i.sstatic.net/Di6RX.jpg

Below is the code snippet I am using:

<div class="nh-service-card-image-wrapper">
    <img src="images/guitar.jpg" alt="Reebit" class="img-fluid rounded-circle" 
    width="85" height="85">
</div>


 .nh-service-card-image-wrapper {
    aspect-ratio: 1;
 }

 .nh-service-card-img img {
     object-fit: cover;  
     width: 90% !important;
     height: 90% !important;
     margin-top: 1.2em;
 }

Please note that the width="85" and height="85" attributes in the img tag are necessary for the technology I am using.

htmlcssimagebootstrap-4

Answer №1

The problem lies within the img-fluid class. This class will reset your image's height to auto and set the width to 100%.

Try deleting that class, and it should function correctly.

Additionally, you have applied margin-top: 1.2rem, which will not take effect unless you change your image to inline-block or block;

Answer №2

To achieve the desired oval shape on mobile devices, consider adjusting the width and height of your image. You can either hard code the width or increase the height until you reach the desired form.

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

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms

Setting boundaries for <td> widths: min-width and max-width

Similar Question: Min-width and max-height for table atrributes The <tables> and <td> elements do not recognize the percentage-based attributes min-width or max-width as per specification. How can this be simulated? ...

htmlcss

When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...

cssmenuhover

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能？

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

htmlangularangular-materialangular-material-table

Locate the index of each distinct element within the array

Let's define an array called 'arr' with some elements: [7, 9, 30, 40, 50, 8, 1, 2, 3, 40, 90,2, 88,1] We also have another output array defined as: [0, 1, 2, 3, 4, 5, 6, 7, 8 ,10, 12] I stored this code snippet on a javascript ...

javascripthtmlarraysalgorithmsorting

PHP query for beginners. Integrating JavaScript into a PHP webpage

Hey there! I am not familiar with PHP development, as I have never worked with it before. However, I have been tasked with adding a Google Shopping cart tracking code to a website. After someone completes an order, they are sent to finishorder.php. Upon re ...

phpjavascripthtml

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

phpjavascripthtmljson

Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing. <div c ...

cssreactjstwitter-bootstrapbootstrap-4

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

javascriptjqueryhtmlcssjquery-ui

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

htmlcss

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

javascriptjqueryhtmlaudiogoogle-chrome-extension

Expanding list item with jQuery

I am facing an issue with the dropdown functionality of my <li> elements. The problem occurs when clicking on the 4th option, as the expander appears on top instead of dropping down beneath the list item. If you check out this jsFiddle, you can see ...

jqueryhtmlcssgrid

Reduce the size of a container element without using jquery

In my Angular application, I have structured the header as follows: -- Header -- -- Sub header -- -- Search Box -- -- Create and Search Button -- -- Scroll Div -- HTML: <h1> Header </h1> <h3> Sub header </h3> <div class="s ...

javascripthtmlcssangulartypescript

The issue arises when attempting to render an SVG with JavaScript embedded inside using the img, object, or

Issue with the title ... please follow these steps: (view codes below) Create an svg + open it separately (name it keysaway.svg) Create html + open it individually When you observe, the svg displays a simple up and down animation but fails to work when l ...

javascripthtmlsvg

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

javascripthtmlangularjscss

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

Fetch several images simultaneously from a photo collection using JavaScript by generating a batch process

I need help with creating an image gallery that allows users to download multiple images by selecting them. The download should result in a zip file. I have checkboxes for selecting the images, but I'm struggling to figure out how to enable the downlo ...

javascriptjqueryhtmlbootstrap-4