Question

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

Answer 1

如果您想强制使用img元素的宽度/高度：

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

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

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

bootstrap中的img-responsive类将设置：

max-width: 100%;
height: auto;

对于图像，如果你想要一个特定的宽度/高度 - 这不是你想要的。

Answer 2

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

所有图片都有一种叫做宽高比的东西。这可以是 1：1 ，这意味着对于每1px（或任何您的测量单位），另一侧有1px。那么1：2所以每1px在另一侧有2px而1：3,1：4 ......等等。

您希望拥有的比率为1：1，即100px * 100px。

但是这不能强制来自具有其他宽高比的图像而不会扭曲图像。像facebook这样的公司通过创建图像的裁剪版本或给它背景大小封面来做到这一点。

我的建议是创建一个高度和宽度为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，那么某些图像将不可见，这正是您要实现的目标。此外，如果您想更改图像的位置，可以使用背景位置属性。

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

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