How to make scalable circle-cropped images?


#1

I have a row of thumbnail images with a circle crop. I used the following CSS:

.crop-img{
  width: 85px;
  height: 85px;
 object-fit: cover;
object-position: center // initial var;
  border-radius: 100%;
}

.crop-img img {
  vertical-align:top;
}

They render as perfectly round circles.

My problem is when I drag my browser window, the images scale horizontally, but not vertically:

images after scale

How can I make them scale proportionately?


#2

It may help to see my html:

<div class="container">
	<div class="deskContent">
		<table  border="0"  max-width: "100%">
  			<tr>
    			<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
    			<td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/crazy8_0108.jpg"   align="middle"   style="max-width: 100%; " alt="Crazy 8-HourSale" img id="image1" /></td>
    			<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
    			<td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/dropaline.jpg"   align="middle"  style="max-width: 100%;"  alt="Everyone's a Winner" img id="image2" /></td>
    			<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
    			<td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/splash_dropaline3.jpg"    align="middle"   style="max-width: 100%;"  alt="Look What You Reeled In" img id="image3" /></td>
        		<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
                <td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/crazy8_0108.jpg"   align="middle"   style="max-width: 100%; " alt="Crazy 8-HourSale" img id="image1" /></td>
    			<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
    			<td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/dropaline.jpg"   align="middle"  style="max-width: 100%;"  alt="Everyone's a Winner" img id="image2" /></td>
    			<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>
    			<td width="15%"  align="center" valign="middle"><img class="crop-img" src="images/eww/splash_dropaline3.jpg"    align="middle"   style="max-width: 100%;"  alt="Look What You Reeled In" img id="image3" /></td>
        		<td width="1%"  align="center" valign="middle"><img src="images/spacer.gif" width="10" height="10"/></td>    
  			</tr>
		</table>
    </div>
</div>

I have achieved the result I need in previous cases, but it seems the addition of the circular crop somehow overrides my max-width. Or it needs to be applied differently.


#3

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