Making an image with circle crop responsive?

HTML & CSS
1

Hi,

I have an image that has a border-radius making it circular. I have had to set a width and height the same to make it circular.

Is there a way to make it circular without a set width and height so that it then become responsive as at the moment when I resize my browser, it pushes the window’s width out.

This is a fiddle of what I mean:

Thanks

2

I’m sure @PaulOB will have a much more elegant method, but if you set a height/width to the container, and then set the height/width of the image to 100%; it becomes responsive (the hard coded sizes guarantees it’s not responsive).

.about-image  {   width: 100vw; max-width: 20em;
                  height: calc(100vw * (15/16)); max-height: calc(20em * (15/16)); 
                  padding: 0;
}
.about-image img{
	border-radius: 50%;
	border: 5px solid #00bf8b;
	width: 100%;
	height: 100%;
	margin-bottom: 30px;
}
1 Like
3

Hi there toolman,

are you saying that the image in question is not square?

If that is the case, then something like this might suit…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

div {
    width: 40%;
    padding-top: 40%;
    margin: auto;
    border: 0.31em solid #00bf8b;;
    border-radius: 50%;
    background-image: url(https://via.placeholder.com/600x1000/fff/00bf8b/);
    background-size: 100% auto;
    background-position: center center;
    box-shadow: 0 0 1em rgba( 0, 0, 0, 0.75 );
 }
</style>

</head>
<body> 

<div></div>

</body>
</html>

coothead

1 Like
4

Hello,
Simply make it a background image and have a div. when the div is made smaller on various screen sizes so will the image. If you have running bootstrap, your divs are auto responsive. Here’s the code

.div {
Background-image: url(‘https://example.com/image’),
Background-size: contain,
Background-repeat: none,
}
5

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