无论原始大小如何，都以相同大小显示所有图像答案

【问题标题】：display all image the same size regardless of its original size无论原始大小如何，都以相同大小显示所有图像
【发布时间】：2016-09-05 17:18:39
【问题描述】：

我有一张会员桌。当我在 html 中显示所有图像时，它们都以相同的大小显示，但是当我输入 class='img-responsive' 时，它们会恢复到原来的大小。

【问题讨论】：

【解决方案1】：

好的，我现在明白你在问什么了。所以让我解释一下。

所有图像都有一个称为纵横比的东西。这可以是 1:1，这意味着每 1 像素（或任何您的测量单位）在另一侧就有 1 像素。然后 1:2 所以每 1px 在另一边有 2px 和 1:3, 1:4 ...等。

您想要的比例是 1:1 的比例，即 100px * 100px。

但这不能在不扭曲图像的情况下从具有其他纵横比的图像中强制执行。像 facebook 这样的公司通过创建图像的裁剪版本或为其设置 cover 的背景大小来做到这一点。

我的建议是创建一个高度和宽度为 100px 的 div 并将图像设置为背景图像，如下所示：

.divClass{
      background-repeat:no-repeat;
      background-size:cover;
      width:100px;
      height:100px;
}

接下来将以下内容添加到您的 php 代码中

<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');">

这将允许图像完全填充 div，同时保持纵横比。缺点是如果图像的纵横比不是您想要达到的 1:1，则某些图像将不可见。此外，如果您想更改图像的位置，可以使用 background-position 属性。

如果您希望能够看到整个图像，您可以添加一个弹出框。

您的最终解决方案是裁剪图像或允许用户在上传之前裁剪图像。下面是一个很棒的插件，可以实现这一点。

【讨论】：

先生图片是使用php从数据库中生成的。所以我将背景图像与 div 内联，但它不起作用。甚至粘贴您的代码。它只是使 div 100x100 并且图片不占据整个 div
好的，先生。你能在我标记你的答案正确前两天给我吗？我需要研究这个插件谢谢！ :)

【解决方案2】：

如果你想强制 img 元素的宽度/高度，你可以使用：

img {
    width: 100px;
    height: 100px;
}

如果您正在使用其他一些覆盖默认 css 行为的库，您可以使用 !important:

img {
    width: 100px !important;
    height: 100px !important;
}

引导程序中的img-responsive 类将设置：

max-width: 100%;
height: auto;

到图像，如果你想要一个特定的宽度/高度 - 这不是你要找的。p>

【讨论】：

不。我的意思是，如果图像原始尺寸为 258x158，我想将其显示为 100x100。我数据库中的所有图像，无论其原始大小如何，都将显示为 100x100 并且会响应。这不可能吗？
如果它们将显示为 100X100 - 它们不再不响应，它们是固定的。你应该决定你想要哪一个。是的 - 我的回答会将所有图像设置为您想要的确切宽度/高度。
先生，我放弃了这个。我找不到可以使其 100x100 固定并同时响应的解决方案。 huhu 如果没有其他解决方案，那么我会将此标记为正确
您能否解释一下“100X100 固定且同时响应”是什么意思？也许如果我能理解你的意思，我将能够提供更好的解决方案。您也可以举个例子（我有一个 XY 的图像，我希望它是 100*100，我有一个 TZ 的图像，我希望是 20*20）。
因为我希望数据库中的图像以相同的高度和宽度显示，因此无论原始大小如何，它看起来都不错。示例 240x150 将显示为 100x100。 320x200 也将显示为 100x100。我还希望他们使用 bootstrap 3 类 img-responsive 做出响应。 <td><div><img src=" . $row['product_image'] . " width='100' height='100' class='img-responsive'></div></td>