如何使用CSS（和百分比）制作不同高度和重量的图像？

Question

这类似于How can I make all images of different height and width the same via CSS?，除了我试图使这些尺寸响应并且不能设置像素值 - 我需要百分比。

基本上我使用的几乎所有照片都是相同的宽度和高度，但是它们中的一小部分更高或更宽。我将所有这些图像显示在圆圈中，宽图像很合适，但高大的图像看起来像椭圆形。

我不关心真正修复宽图像，因为它们适合圆形，但我需要修复高大的图像。

一些HTML（JavaScript - Google Maps API InfoWindow）

for (i = 0; i < myList[infoId].numOfFUnits; i++) {
    infoString = infoString + ("<a href=\"" + myList[infoId].fUnits[i].pageLink + "\"><img src=\"" +
        myList[infoId].f[i].photo + "\" class=\"mPhoto\" alt=\"" + myList[infoId].fUnits[i].displayName + "\"></a>");
}
infoString = infoString + ("<br/><strong>Images<strong></div>");

var infoBox = new google.maps.InfoWindow({
    content: infoString,
});

CSS

.mPhoto{
    margin-top: 5px;
    width: 30%;
    height: auto;
    border-radius: 50%;
    border: 1px solid white;
}

• 我可以通过将最大高度设置为188.09px（全屏宽度）来解决这个问题，但是当我将窗口大小更改为小于此值时，我们会遇到同样的问题。
• 我无法使用document.getElementsByClassName().style将max-height设置为当前宽度，因为我使用的是InfoWindows，而HTML是在JavaScript文件中，而不是HTML文件
• 我尝试将它们设置为背景图像，但这需要设置宽度和高度与像素，而不是百分比。
• 改变对象适应没有影响，虽然它最初似乎。

有任何想法吗？

Answer 1

你需要在图像上设置max-height。这将阻止高大的图像变成椭圆形。

Answer 2

问题是，为了有响应的完美圆圈，当屏幕调整大小时，width需要与height相同。

据我所知，唯一可以强制执行此操作的方法是使用JavaScript在页面变大时增加较小的值，并在变小时减小较大的值。

这可以在下面非常笨重的例子中看到，它相应地调整了大小：

var width = $(window).width();
var height = $(window).height();

$(window).resize(function() {
  // Set the height and width variables on resize
  width = $(window).width();
  height = $(window).height();
  
  console.log(width);
  console.log(height);

  // Collect the images
  var images = document.getElementsByClassName('img');
  
  // Increased width
  if (width > $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width++;
    }
  }
  
  // Decreased width
  if (width < $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width--;
    }
  }

  // Increased height
  if (height > $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height++;
    }
  }
  
  // Decreased height
  if (height < $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height--;
    }
  }
});

.img {
  position: relative;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg'); width: 100px; height: 100px;"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg'); width: 100px; height: 100px;"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg'); width: 100px; height: 100px;"></div>

请注意，这使用内联样式来设置初始width和height，因为如果在样式表中设置了属性，则无法（轻松）使用JavaScript更新属性。

虽然我确信上述内容可以更简洁地实现，但这应该有望实现您的目标:)

您可以通过单击“运行代码片段”然后单击“整页”来查看此操作。从这里您可以调整页面大小以查看图像大小变化，同时仍然保持完美的圆形。

希望这可以帮助！

Answer 3

object-fit: cover怎么样：

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

请注意，object-fit需要显式声明width和height才能工作。它们的值也可以是相对单位。

Answer 4

问题是我需要宽度和高度基于实际图像大小以外的其他东西的百分比。将宽度和高度设置为30％将是图像宽度和高度的30％（没有帮助），并将它们设置为200px工作，但没有响应式设计。

正如Gerardo BLANCO在现在删除的评论中提到的那样，使用vh或vw作为单位是一个选项（1 vh等于视口高度的1％，1 vw等于其宽度的1％）。这非常有用，更有用的选项是使用vmin，它是视口宽度或高度的1％（以较小者为准）。

（注意：vmin不适用于某些旧版本的浏览器，并且边缘不清楚。）

.mPhoto{
    margin-top: 5px;
    width: 30vmin;
    height: 30vmin;
    border-radius: 50%;
    border: 1px solid white;
}

这不仅使我的图像大小相同，而且现在当我调整浏览器大小时圆圈会改变大小而不必关闭并重新打开InfoWindow。