代码之家  ›  专栏  ›  技术社区  ›  vishvAs vAsuki

在边框内包含数字图像

  •  0
  • vishvAs vAsuki  · 技术社区  · 7 年前

    以下代码

    <figure style="">
    
        <img src="https://i.stack.imgur.com/z0tkb.png">
    
    </figure>
    

    样式参数应该在上面,以便 the image 按比例调整大小,但不裁剪以保留在250*250平方的缩略图类型内。

    PS:以下裁剪图像:

    width: 250px;
    height: 250px;
    border-style: solid;
    border-width: thick;
    object-fit: contain;
    contain: content;
    
    2 回复  |  直到 7 年前
        1
  •  4
  •   Giorgio Zanni    7 年前

    给予 width: 100% height: auto 使图像具有响应性的属性。它将调整大小以填充其父度量值。

        2
  •  1
  •   Partho63 BASANT KUMAR    7 年前

    这就是你想要的吗?

    <figure style="text-align: center; width: 250px; height: 250px; border-style: solid; border-width: thick; object-fit: contain; contain: content;">
        <img src="https://i.stack.imgur.com/z0tkb.png" style="height: 100%;">
    </figure>