CSS-使用浮动元素保持圆角图像

Question

我在一个网站上有一个新闻提要，其中(每个新闻项目(有一个标题图像，图像下面有一个主题。我想在手机上显示一些不同的新闻源。在手机上，我想在左边的圆圈里显示图像，在它旁边的右边，我想显示标题。

这就是我所拥有的：

@media(max-width: 600 px) {
.widget--newsfeed.content-block__thumbnail {
border-radius: 50 %;
float: left;
width: 25 %;
display: inline;
}
.widget--newsfeed.content-block__fields {
float: left;
display: inline;
width: 75 %;
padding-left: 10px;
}
}

它正是我想要的，唯一的问题是图像不再是圆形了。由于25%的宽度值(我想(，这个圆圈看起来更像一个鸡蛋。由于某些原因，我无法更改图像的高度。有趣的是，我不能更改内容的html，我只能添加/更改CSS和类。

Answer 1

将Css直接赋给其子映像。请参阅摘录中的示例。

.round{ border-radius: 50%;
float: left;
width: 25%;
display: inline-block;}

.round img {
border-radius: 100%;
width: 100%;
height: 100%;
display: block;
}

<div class="round">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyaALow02D9x21PCO5Z6Ewct0FdLtUYyB9Q_ECFyeL5hpU6pvg"/>
</div>