Getting the right image to size up the same as the left

HTML & CSS
1

1.) Did I set the width/height correctly in the code?

2.) How do I match the border radius?

Currently stuck on this:
The top piece on the left one measures 128px
How do I match that with the right?

The left one is taller than the right one, how do you adjust that?
So that the right one is the same height.

The Left one is:112px

The right one is: 106px.

How do you adjust the height?

Update:
I just adjusted the height on the right one, but did I do it correctly?


Left Image


<div style=" border: 3px solid #0059dd;width: 260px;height: 194px;cursor: pointer;background-color: black;">
  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    
  </svg>
</div>

Right Image

  #container2 {
    background-color: black;
    width: 260px;
    height: 194px;
    border: 3px solid #0059dd;
    margin: -200px 280px
  }
  
  .test {
    background: url(https://i.imgur.com/BO6KOvw.jpg) no-repeat;
    background-size: 170px 112px;
    border-radius: 26% / 70%;
    width: 170px;
    height: 112px;
    margin: 41px 45px
  }

</style>


<div id="container2">
  <div class="test">

</div>
</div>
2

Is there something wrong with the good old <img> tag?

2 Likes
3

That doesn’t work with svg.

4

I keep on asking, why do you have to
use SVG for all of your projects? :rolleyes:

coothead

1 Like
5

I’m not using it on this one, on this one I’m converting the svg style, to html style code, that’s all.

6

Somethng like:-

<img src="filepath/MySvgImage.svg" width="260" height="106" alt="An SVG Image">

…does work.

2 Likes
7

Hi there asasass,

Here you go squire, and at your favourite hang out too. :rofl:

I really hope that this behaviour of mine isn’t the onset
of senile dementia but rather just a slight losing the plot. :eek:

coothead

3 Likes
8

How were you able to do that, I’ve been trying the whole day to do that.

9

What’s the difference between background-size, and width height?

background-size is the actual width and height.

Then, what does width/height mean?


    background-size: 170px 112px;
    border-radius: 50%;
    width: 170px;
    height: 170px;
10

Width and height are the dimensions of the element. Background size is the size of the background within the element. These two things can be totally independent.

2 Likes
11

Hi there asasass,

“background-size” sets the dimension of the “background-image” ,
“width and height” set the dimension of the containing element.

In this image…

  1. the dark gray line is your #container2 - ( 260px by 194px ).
  2. the red dotted line is your .test - ( 170px by 170px ).
  3. the light grey line is the border-radius - ( 50% ).
  4. the background-image has background-size - ( 170px 112px ).
  5. the background-image is centered in .test.

I trust that this helps. :winky:

5 Likes
12

What’s the reason why background-size: 170px 112px; as I understand, isn’t needed on this code?

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png")no-repeat center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

But it is needed on here?

.test {
  background: url(https://i.imgur.com/BO6KOvw.jpg) no-repeat center;
  background-size: 170px 112px;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  margin: 12px 45px;
}

What’s the reason why this is?

13

I figured it out.

One url is scaled to size, the other one isn’t.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.