将导入的图像缩放到图片框html

我有一个页面，用户可以上传这些图片作为他们的个人资料图片。我在php和html中使用以下代码导入它：

$data = mysqli_fetch_assoc;
$image = $data['image'];

还有html

<img src = "./imgs/<?php echo $image; ?>" style = "height:200px; width:200px;>

”style=“高度：200px；宽度：200px；>

---

唯一的问题是，一些实际上不是“正方形”的图片在图像框中看起来会大大拉伸。如何使图像框显示图像的原始“方向”（例如，当显示5x10图像（100px x 200px）时，如何不使其自动拉伸到10x10方向

您不必指定图像大小，因此如果您希望所有图像都采用所有宽度，您只需应用

宽度：100%

，并且不指定

高度

，它将自动计算您已使用内联样式将图像的高度和宽度显式设置为200px

我建议您让浏览器为您自动计算高度，并且只将宽度设置为200px（这将使高度

自动
）

如果要在不拉伸/挤压图像的情况下保持方形图像，应使用带有背景图像的容器，如下所示：

HTML:

当然，您最好确保图像之间的某种标准化，例如，在用户上传图像时强制执行最大宽度、高度或纵横比。
您使用的术语“方向”是错误的。方向表示图片为“横向”（x值大于y值）、“纵向”（y值大于x值）或正方形（两个轴的大小相同）

您要寻找的是图像的容器，它始终是一个正方形（1:1），其中的图像不会拉伸

您可以通过CSS将图像应用为
背景图像
，并为其指定
背景大小：封面
，来实现这种行为。这将适合容器内的图像，从任意一侧裁剪额外的像素

HTML示例：

<div class="container"></div>

如果在
元素中内联导入，则可以设置PHP代码中的CSS格式，并使用
$image
变量：

<?php
  $image = $data['image'];
?>
<style>
  .container {
    width: 250px;
    height: 250px;
    background-image: url('<?= $image ?>');
    background-size: cover;
  }
</style>


.集装箱{
宽度：250px；
高度：250px；
背景图像：url（“”）；
背景尺寸：封面；
}

<div class="container"></div>

.container {
  width: 250px;
  height: 250px;
  background-image: url('/path-to-image/image.png');
  background-size: cover;
}

<?php
  $image = $data['image'];
?>
<style>
  .container {
    width: 250px;
    height: 250px;
    background-image: url('<?= $image ?>');
    background-size: cover;
  }
</style>