【问题标题】:Why is my img-responsive class not scaling correctly?为什么我的 img 响应类不能正确缩放?
【发布时间】:2017-01-01 02:23:19
【问题描述】:

http://www.blessedbythebestbarbershop.com/photos.html
由于某种原因,右下角的图片不断调整到不同的高度,我不确定为什么。图像大小与其他 5 个相同。有人能说出为什么要这样做吗?

link to source

【问题讨论】:

  • 我们需要查看您的源代码(HTML、CSS),而不仅仅是指向您网站的链接
  • 有些是720x960,有些是528x960。

标签: css image twitter-bootstrap image-scaling


【解决方案1】:

添加到Syden says

当前第一张图片:720px × 960px(缩放到 350px × 467px)
目前第 6 张图片:528px × 960px(缩放为 350px × 636px)

这第 6 张图片的宽高比与其他图片不同(具有 11 : 20 而不是 15 : 20)。

您的图像被缩放到设置的强制宽度 (350px),因此图像的高度与 它的缩放宽度成比例。为了解决这个问题,您需要保持图像纵横比完全相同,因此当它们具有相同的宽度时,它们将具有相同的高度。

有多种解决方案,例如强制 CSS 裁剪图像和设置最大高度,但您可能不会想要这些。简单地根据其他图像调整第 6 张图像的大小要容易得多。

【讨论】:

    【解决方案2】:

    因为有些图片是 720 x 960 像素,有些是 528 x 960 像素。

    如果可以的话,将它们全部 Photoshop 成静态相同的大小。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-26
      • 2020-08-31
      • 1970-01-01
      • 1970-01-01
      • 2016-02-22
      • 1970-01-01
      相关资源
      最近更新 更多