CODEWITHSUNDEEP
css
Kas
Kas

Reputation: 67

Rounded images css

This line of code loads a link with an image above it. 

<li class="post-nav-wrap">
    <?php
        $prevPost = get_previous_post(true);
        if($prevPost) {
            $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );
        }
        previous_post_link('%link',"$prevthumbnail  %title", TRUE);
    ?>
</li>

I called the image within css with:

.post-nav-wrap img {
    width: auto;
    height:110px;
}

what I want is the images to be completely rounded. I know how to do this with a image the size of a cube. (like both height and width the same) but this image is a rectangle (265px by 110px). Is is possible to make it completely rounded within css?

Upvotes: 1

Views: 140

Answers (3)

ShubhamSharma
ShubhamSharma

Reputation: 1

This can be achieved pretty straight forward->>
Just add a class to your image->>

.rounded {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

Upvotes: 0

Alejalapeno
Alejalapeno

Reputation: 1008

img {
  border-radius: 100%;
}
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=265%C3%97110&w=265&h=110" />

And incase you meant create a circle from the image:

Add a wrapper to the image and add the border radius to that. Hide the overflow and position the image into the center.

.circle-wrapper {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 100%;
}
img {
  width: auto;
  height:110px;
  position: absolute;
  transform: translateX(-50%);
  left: 55px;
}
<div class="circle-wrapper">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=265%C3%97110&w=265&h=110" />
</div>

Upvotes: 4

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

div { 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

DEMO FIDDLE

More examples

Upvotes: 0

Related Questions