Question

我需要在300x300 div内放置图像而不拉伸图像。我在这个页面上的滑块上看到了这个：

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

图像被裁剪但未拉伸。而不是使用max-width，max-height。

我该怎么做？

Answer 1

您链接到的网站上的图片是实际尺寸，因此简单的答案就是调整图片大小。

如果图像恰好小于300px宽或高，你不能真正做到这一点，但你可以在不改变比率的情况下做到这一点，这就是我认为你的意思。

这是基本想法：

<div><img></div>

如果你想使用300px作为最小宽度（你希望小图片需要更大），试试这个：

div {
    width:300px;
    height:300px;    
    overflow:hidden;
}
div img {
    min-width:100%;
}

演示：http://jsfiddle.net/Z47JT/

如果你想剪辑图像（因为你希望它们很大）但不要放大它们，试试这个：

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}

演示：http://jsfiddle.net/Z47JT/1/

如果需要，可以结合使用这两种技术。

另一种方法是简单地在容器上使用background-image，但是除非使用不完全支持的background-size，否则调整大小（如果要拉伸较小的图像）将很困难。否则，这是一个非常简单的解决方案。

Answer 2

使用弹性盒解决方案

这是html，

const aString = "hello, this is a string";
const iterator = aString[Symbol.iterator]();

var typewriter =
  setInterval(() => {
    if (iterator.next().done) {
      clearInterval(typewriter);
    } else {
      console.log(iterator.next().value);
    }
  }, 200);

添加样式

<div><img /></div>

Answer 3

执行此操作的简单方法。...

var inpCountry = e.options[e.selectedIndex].text;

function myNewFunction() {
    alert(inpCountry.text);
}

}

在div内部适合图像而不拉伸

3 个答案: