时间戳

首页 > 解决方案 > 为什么照片下面有黑色的东西？

html - 为什么照片下面有黑色的东西？

问题描述

this is css the size of the photo is more than 400

*{
    margin:0px;
    padding: 0px;
}
.sekil1{
    margin-top: 5px;
    margin-left: 7px;
    width: 400px;
    height: 400px;
    background-color: black;
}
img{
    max-width: 100%;
    max-height: 100%;
}
this is html

<div class="sekil1">
  <img src="https://drive.google.com/uc?id=1Sqbsu8piu7_D933-nUbqUmlCYx4HbRvP"> this is photo and the size of the photo is more than 400
</div>

照片尺寸大于400*400。为什么照片下面有黑色的东西？

https://codepen.io/cavad/pen/abBLNdv

标签： htmlcss

解决方案

您已将图像插入到固定大小为 400px x 400px 的 div 中。您已为此 div 分配了黑色背景颜色。通过设置 max-width 和 max-height 你告诉你的图像保持其原始纵横比。因此作为矩形的图像，只有宽度会取 400px 的值，剩下的区域是 div 的背景颜色。

您可以将 div 的背景颜色设置为透明。

您也可以不设置 div 的高度。

如果您的目标是通过稍微裁剪来使图像呈正方形，那么只需将 max-width 替换为 width 并将 max-height 替换为 height

我希望我有帮助！

推荐阅读