CODEWITHSUNDEEP
csssvg
Maarten Cox
Maarten Cox

Reputation: 3

Image in circle not completely visible

I styled a cricle around an svg icon, but the icon is cut off on the top.

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  vertical-align: middle;
  padding: 10px;
  fill: #30574b;
}
<img class="transport-circle style-svg" src="https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg" alt="Train" width="100" height="100" />

Any idea how I can get the train icon fully visible?

Upvotes: 0

Views: 398

Answers (2)

WizardCoder
WizardCoder

Reputation: 3461

I don't think you can avoid the image being cut off when you apply border radius to the image, unless there is more white space around the actual svg image.

Alternatively you can add the circle styling to a wrapper div.

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  vertical-align: middle;
  padding: 10px;
  fill: #30574b;
}
.transport-circle img {
  width:100%;
  height:auto;
}
<div class="transport-circle style-svg">
<img src="https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg" alt="Train" width="100" height="100" />
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

Consider the icon as a background to avoid this issue:

.transport-circle {
  border: 3px solid #30574b;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 10px;
  background-size:cover;
  background-position:center;
  background-origin:content-box;
  background-repeat:no-repeat;
}
<div class="transport-circle style-svg" style="background-image:url(https://wordpress-175698-743047.cloudwaysapps.com/wp-content/uploads/2019/07/train.svg)" alt="Train" ></div>

Upvotes: 1

Related Questions