相关疑难解决方法(0)

我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度,图像将被拉伸,它可能是丑陋的.

如何使用CSS 将图像填充到特定大小,而不是拉伸它？

填充和拉伸图像的示例:

原始图片:

拉伸图像:

填充图片:

请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100.

我需要将此图像拉伸到可能的最大尺寸,而不会溢出<div>或倾斜图像.

我无法预测图像的宽高比,因此无法知道是否使用:

<img src="url" style="width: 100%;">

要么

<img src="url" style="height: 100%;">

我不能同时使用两者(即style ="width:100%; height:100%;")因为这将拉伸图像以适应<div>.

该<div>具有的大小为屏幕,这也是不可预测的百分比来设置.

正如这里所讨论的,我试图在div中覆盖一个图像.只需这些简单的线条,我就可以通过background-image以下方式实现:

div{
    width: 172px;
    height: 172px;
    border-style: solid;
    background-image: url('../images/img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

结果,图像在div中居中并且被调整大小以使其适合div的宽度或高度(取决于图像是否宽或者不同).现在我想在div中使用image标签获得相同的结果.

<div>
  <img src="images/img1.jpg"/>
</div>

有没有办法通过简单的CSS来解决这个问题？

http://www.bootply.com/somVIZEXxC#这是我的网站的bootply,基本上我希望cols col-lg-6的高度相同,以便我在其中的图像是均匀的,此刻,一个图像在另一个图像下方延伸.

编辑:当前版本http://www.bootply.com/UIWf6q09h4

我在容器内有一个图像，我希望它是一个完美的正方形。我将宽度设置为容器的100％，目标是height使图像的宽度与宽度相同，因为我不知道由于响应式设计，容器的尺寸将是多少。

有任何想法吗？我正在使用sass，如果有帮助的话。

.container {
width: 50%;
}

.container img {
  width: 100%;
  height: 400px; //this should be the same as the width value..
}

<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>

最好没有javascript解决方案，但也许不可能做到这一点？