HTML中的图像超大答案

【问题标题】：Image oversize in HTMLHTML中的图像超大
【发布时间】：2015-08-29 09:44:11
【问题描述】：

如何通过 PHP 在目录中查找图像来解决我的简单 HTML 照片库中的图像过大问题？我无法解决它，而且视觉效果不佳。你能帮我么？截图是

谢谢。

【问题讨论】：

“图像过大”是什么意思？也许您应该说明您想要实现的目标是什么，例如“我希望所有图像都具有相同的尺寸 (200x200)” 你想如何处理纵横比？始终保持纵横比？如果比例关闭，您是否只想显示照片的一部分？你想显示黑条吗？白条？

标签： html image

【解决方案1】：

在您的 css 文件中，您可以添加高度和宽度属性来调整图像大小。

例如：

img {

  heigth:200px;
  width: auto;

}

将高度设置为 200 像素，但会保持纵横比。要使用方形图像，请将宽度设置为，例如，200px

如果您愿意，可以将图像设置为可滚动，如下所示：

img {

  height:200px;
  width:200px;
  overflow: scroll;

}

【讨论】：

【解决方案2】：

这对你来说可能是一个很好的例子。也参考stackoverflow老问题。这是链接：link

    .img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>

【讨论】：

【解决方案3】：

将所有图片设置为相同的类，然后为该类添加图像高度，它将将图像设置为所有相同的高度。

这是我刚刚制作的一个例子 - http://jsfiddle.net/3gd5ooLf/

我不确定你是如何在 PHP 中获取图像的，所以我无法告诉你如何在没有看到一些代码的情况下设置类。

这是 CSS 示例：

.height {
    height: 100px;
}

【讨论】：