Question

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

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

和html

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

唯一的问题是，一些实际上并非“方形大小”的图片在图像框中会显得非常拉伸。如何使图像框显示图像的原始“方向”，例如，当显示5x10图像（100px x 200px）时，如何才能使其自动拉伸到10x10方向？

Answer 1

您不必指定图片尺寸，因此如果您希望所有图片都采用所有宽度，您只需应用width: 100%并且不要指定height，它将自动计算< / p>

Answer 2

您已使用内联样式将图像的高度和宽度显式设置为200px。

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

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

HTML：

<div class="profile-image"></div>

CSS：

.profile-image {
    background-image: url('image/url/image.png');
    background-size: cover;
    background-position: center;
}

当然，您最好确保图像之间的某种标准化，例如，在用户上传图像时强制执行最大宽度，高度或宽高比。

Answer 3

您正在使用术语＆＃34; orientation＆＃34;错误。定位表明图片是＆＃34; landscape＆＃34; （x值大于y值），＆＃34;肖像＆＃34; （y值大于x值）或平方（两个轴的大小相同）。

你要找的是图像的容器，它总是一个正方形（1：1），里面的图像不会伸展。

您可以通过CSS将图像应用为background-image来实现此类行为，并为其指定background-size: cover。这将使图像适合容器内部，从任一侧裁剪出额外的像素。

HTML示例：

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

CSS：

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

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

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

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

3 个答案: