问题描述
我正在处理一个包含各种复杂 div 的 squarespace 网站,但我无法让 border-radius
正常工作。我一直在阅读各种主题,关于是将 border-radius
属性放在 img
还是 containing div
上的回答褒贬不一。这是我在 img 上的当前代码:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619"><div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div></div>
我是一个 css 新手,我真的不知道在哪里放置 border-radius 属性。以下是此项目顶级元素的一般流程:
div > div > div > figure > div > img
这是我的图像: 它显示为一个椭圆。我试图使它成为一个完美的圆圈,并将图像裁剪为合适的尺寸。我想可能是因为图像的纵横比。
如果有人有任何想法,我将不胜感激。
编辑:这里是 IMG 元素的代码
<img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e" data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
解决方法
问题是,您的图像具有内联样式:
<img style="left: -0.0220265%;
top: 0%;
width: 100.044%;
height: 100%;
position: absolute;">
inline-style
始终比 css-style
具有更高的优先级,因此会覆盖您的 css。删除高度和宽度属性和值,问题将得到修复:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
object-position: 40% 50%;
}
<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
<div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
data-type="image" style="left: -0.0220265%; top: 0%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div>
</div>
或者,您可以将 !important
添加到 css-style
高度和宽度值以赋予其最高优先级并覆盖 inline style
,如下例所示:
#block-yui_3_17_2_1_1613415096810_5619 img {
display: block;
width: 200px !important;
height: 200px !important;
object-fit: cover;
border-radius: 50%;
object-position: 40% 50%;
}
<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1613415096810_5619">
<div class="sqs-block-content" id="yui_3_17_2_1_1613585600072_388">
<div class="
image-block-outer-wrapper
layout-caption-below
design-layout-inline
combination-animation-none
individual-animation-none
individual-text-animation-none
" data-test="image-block-inline-outer-wrapper" id="yui_3_17_2_1_1613585600072_387">
<figure class="
sqs-block-image-figure
intrinsic
" style="max-width:2500px;" id="yui_3_17_2_1_1613585600072_386">
<div style="padding-bottom: 56.24%; overflow: hidden;" class="
image-block-wrapper
has-aspect-ratio
" data-animation-role="image" id="yui_3_17_2_1_1613585600072_385">
<noscript><img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" alt="P1890464 (1).jpg" /></noscript><img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg"
data-image="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg" data-image-dimensions="2500x1406" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="602ac5c3963d57265116477e"
data-type="image" style="left: -0.0220265%; top: 0%; width: 100.044%; height: 100%; position: absolute;" alt="P1890464 (1).jpg" data-image-resolution="2500w" src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</div>
</figure>
</div>
</div>
</div>
编辑:按照评论部分的要求,将 object-position: 40% 50%;
添加到图像中的“中心”人物。
你没有正确使用img标签,你应该在HTML中做如下
#img img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}
<div id="img">
<div>
<div>
<figure>
<img src="https://static1.squarespace.com/static/57f18cc8be659461b9d2a9ea/t/602ac5c3963d57265116477e/1613415902093/P1890464+%281%29.jpg?format=2500w">
</figure>
</div>
</div>
</div>
要使其成为完美的圆形,您需要将图像设为正方形。我看到您正试图通过设置 width
和 height
属性来做到这一点,但它们不起作用。这可能是由于 object-fit: cover;
属性所致。
尝试将其取出,它可能会修复它。