Stretching Images on Circular Images - Utilizing Bootstrap and SCSS styling

Can anyone assist me with this problem?

I am currently utilizing bootstrap cards to create a section on my website. However, I am encountering an issue with the circular images of the cards. I want to prevent my images from getting stretched when placed in the circular frame of the card. Is there a way to zoom in on the center of the image while displaying it in the circle, or am I possibly making an error in my SCSS code?

Here is the problem:

https://i.sstatic.net/I8BJ6.png

Desired Outcome: https://i.sstatic.net/ALcZ8.png

Dimensions of these Images:

910x592 , 1230x802 , 1230x794

Bootstrap Code:

<section class="about-cards-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 card-wrapper">
                  <div class="card card-style" >
                    <img class="card-img-top rounded-circle circle-image" src="img/about/card-one.png" alt="Card image cap">

                    <div class="card-body">
                      <h3 class="card-title">Our Facilities</h3>
                      <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
                    </div>
                  </div>
                </div>

                <div class="col-sm-4 card-wrapper">
                  <div class="card card-style">
                    <img class="card-img-top rounded-circle circle-image" src="img/about/card-two.png" alt="Card image cap">
                    <div class="card-body">
                      <h3 class="card-title">Our Research</h3>
                      <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
                    </div>
                  </div>
                </div>

                <div class="col-sm-4 card-wrapper">
                  <div class="card card-style">
                    <img class="card-img-top rounded-circle circle-image" src="img/about/card-three.png" alt="Card image cap">
                    <div class="card-body">
                      <h3 class="card-title">Our Expertise</h3>
                      <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
                    </div>
                  </div>
                </div>

            </div>
        </div>
    </section>

SCSS of the Cards Section:

.about-cards-section{

    .card-wrapper{
        margin: 5% 0;

        .card-style{
            text-align: center;
            border-radius: initial;
            border: initial;


            .circle-image{

                width: 60%;
                height: 200px;
                text-align: center;
                display: block;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 20px;
            }
            .card-title{

                text-transform: uppercase;
                letter-spacing: 1.1px;
            }
            .card-text{
                font-family: MerriweatherRegular;
                font-size: 22px;
                line-height: initial;

            }
        }
}
csssassresponsive-designbootstrap-4responsive-images

Answer №1

In my perspective, the solution is to adjust the width and height of the .circle-image class and include the object-fit: cover; property. Since Bootstrap is being used, we can simplify the CSS by utilizing the pre-defined classes in BS4.

For instance: 

.card-wrapper {
  margin: 5% 0;
}

/* Modify image size by adjusting width and height */
.custom-circle-image {
  width: 20vw; /* I opted for vw instead of px for better responsiveness */
  height: 20vw;
}

.custom-circle-image img {
  object-fit: cover;
}

.card-title {
  letter-spacing: 1.1px;
}

.card-text {
  font-family: MerriweatherRegular;
  font-size: 22px;
  line-height: initial;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="about-cards-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 card-wrapper">
        <div class="card border-0">
          <div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
            <img class="w-100 h-100" src="https://source.unsplash.com/910x592" alt="Card image cap">
          </div>
          <div class="card-body text-center mt-4">
            <h3 class="text-uppercase card-title">Our Facilities</h3>
            <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-4 card-wrapper">
        <div class="card border-0">
          <div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
            <img class="w-100 h-100" src="https://source.unsplash.com/1230x802" alt="Card image cap">
          </div>
          <div class="card-body text-center mt-4">
            <h3 class="text-uppercase card-title">Our Research</h3>
            <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-4 card-wrapper">
        <div class="card border-0">
          <div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
            <img class="w-100 h-100" src="https://source.unsplash.com/1230x794" alt="Card image cap">
          </div>
          <div class="card-body text-center mt-4">
            <h3 class="text-uppercase card-title">Our Expertise</h3>
            <p class="card-text">A brief description highlighting a noteworthy aspect of the brand.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

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

The image is not resizing correctly

Currently, the background-image on my website displays properly when the browser occupies the entire screen. However, when I resize the browser window, the image shrinks to a certain point and then suddenly stops adjusting. Here is a visual representation ...

htmlcssbootstrap-4

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

javascripthtmlcssvue.jsmaterial-design-lite

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

htmlcsssvg

alignment of text output and label that responds to various screensizes

Here is some html code with a label and an output next to it. <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Company Name : </label><span class="head9 halfR"> ...

htmlcsstwitter-bootstrapalignmentmultiple-columns

Aligning CSS border headers in a slanted or rotated table cell format

Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element? Here is an example of the HTML code: <table> < ...

htmlcss

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascripthtmlcss

Pictures are not appearing correctly when utilizing the img-fluid class

Issues occur when I apply the "img-fluid" bootstrap class to my images, as they fail to appear on the page and are set at 0x0 pixels in size upon inspection. This is the HTML code: <div class="col"> <div class="row no-gutters"> &l ...

htmlcssbootstrap-4

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular

Ways to time animations differently and activate two animations at the same time in every loop

I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes. Below is the relevant JavaScript code snippet: jQuery(fu ...

javascriptjqueryhtmlcssanimation

Position the current div in the center of a bootstrap progress bar for mobile devices

I'm facing an issue with the bootstrap progress bar on my website, especially on mobile devices where it goes off the screen. I want the current page marker on the progress bar to be centered on the screen while allowing the bar to extend beyond the s ...

phpcsssymfonybootstrap-4symfony4

Adjustable progress bar length calculated from data retrieved through Vue2 getter and styled with SCSS

Does anyone know how to dynamically adjust the length of a progress bar in SCSS using @keyframes? I am trying to pull the value from getters (getTasksFulfilmentRate) and update the progress bar every time the value changes. My main concern is how to effici ...

vue.jssassvuejs2getter

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

Adjusting the height of the navbar items to align with the size of the

In the bootstrap navbar below, I am trying to enlarge the search field to be large using 'input-lg', but this causes the other items in the navbar not to vertically center correctly. How can I align the other items in the navbar with the large in ...

htmlcsstwitter-bootstrap

Place three images in the center of a div container

Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...

htmlcssangularjsangularjs-material

Mobile devices are having issues with CSS rendering

I've encountered an issue with my CSS code. It seems to be working fine until the @max-width:767 media query, but then it stops working on the resolution immediately below it, which is @425. However, it starts working again on resolutions below that. ...

htmlcss

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

htmlcssresponsive-design

Flexbox sets aside space for resized svg images

I am currently working on my site header and I want to implement flexbox for this purpose. I tried using justify-content: space-between; to evenly distribute the empty space between the divs. However, when I add an SVG image and scale it down to fit the ...

htmlcsssvgflexbox