代码之家 › 专栏 › 技术社区 › NeverRests

如何裁剪div

crop properties css html javascript

NeverRests · 技术社区 · 2 年前

我需要裁剪一个div以适应图像的大小,并将其放置在上面。基本上,我试图在网页上的图像上画一个黑框。

代码:

<div class="col-9" style="display: flex; justify-content: center;">
    <div class="itemscenter" style="border-style: solid; border-width: 4px;">
        <img style="width: 85%" src="../Images/fov110.png">
    </div>
</div>

我做了一个边界,然后试着剪下div。我还用了宽度百分比的东西。

1 回复 | 直到 2 年前

Somur 2 年前

只需缩小外部div并将图像的宽度设置为100%

Abhay Sharma 2 年前

您需要根据自己的要求设置图像的高度。

<div class="col-9 d-flex justify-content-center">
<div class="itemscenter" style="border-style: solid; border-width: 4px;">
    <img src="../Images/fov110.png">
</div>
</div>

css

.itemscenter img {
    height: 300px;
    width: 400px;
    object-fit: cover;
    object-position: center;
}

推荐文章