1

I want to make a div the same width as its height. Currently it stretches horizontally, which is not what I want (see the image). Also have a look at the css code!

Thanks for your advice.

The CSS for the red circle (with the logo):

.logo-component {
    background-color: hsla(340, 100%, 50%, 0.6);
    background-image: url('./../images/logo.png');
    background-size: auto calc(100% - 6rem);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100% - 6rem);
    border-radius: 50%;
    transform: translateY(-2.5rem);
}

A Screenshot:

screenshot

Bye.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Timo Müller
  • 43
  • 2

1 Answers1

2

Use aspect-ratio like shown below.

.logo-component {
    background-color: hsla(340, 100%, 50%, 0.6);
    width: 110px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    resize: horizontal;
}
<div class="logo-component"></div>
Krokodil
  • 1,165
  • 5
  • 19