将大图像设置为与图像标签的高度宽度无拉伸

Question

我想尝试设置160 x 160高度宽的大图像。但它伸展开来。我想要没有伸展。不想裁剪图片

<img src="Admin/jobimg/<?php echo $logo ?>" style="overflow:hidden;" height="160px" width="160px" alt="img">

实际图像非常大。

我希望图像尺寸为160 x 160

Answer 1

<强> HTML

<div class="img-wrapper">
  <img src="//placehold.it/640x480">
</div>

<强> CSS ：

img{height:160px;}
.img-wrapper{height:160px; width:160px; overflow:hidden;}

Bootply ：http://www.bootply.com/hglbKqHfRW

Answer 2

仅设置宽度或高度，并将其添加到隐藏溢出的块元素。

请注意，它不是SVG，因此如果你将它缩放得太高会变得模糊

1. 从内嵌或CSS
两个方向上的图像标记中删除约束
2. 在图像类（宽度或高度但不是两者）上设置CSS中的允许约束
3. 使用overflow：hidden限制容器。
＆＃13;
＆＃13;
.thumb img { height:72px;}
.thumb{
  height:72px;
  width:72px; /* Coin only */
  overflow:hidden;
}
＆＃13;
<div class="thumb"><img src="http://www.jagranjosh.com/imported/images/E/Current%20Affairs/RBI-logo-report.png" /></div>
＆＃13;
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.thumb img { height:160px;}
.thumb{
  height:160px;
  width:160px; /* Coin only */
  overflow:hidden;
}
＆＃13;
<div class="thumb"><img src="http://www.jagranjosh.com/imported/images/E/Current%20Affairs/RBI-logo-report.png" /></div>
＆＃13;
＆＃13;
＆＃13;

SVG 我在wikicommons找到了徽标

＆＃13;
＆＃13;
img.svg { height:160px;
  width:160px;
  }
＆＃13;
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Seal_of_the_Reserve_Bank_of_India.svg" />
＆＃13;
＆＃13;
＆＃13;

Answer 3

您必须设置图像的容器。它应该有宽度和高度。然后该容器下的图像将具有绝对定位。

实施例

.image-container{
    position:relative;
    width:250px;
    height:250px;
}

.image-container img{
    position:absolute;
    background-size:cover;
    width:100%;
    height:100%;
}

使用img-responsive类针对不同的屏幕尺寸，使用twitter引导程序来缩放图像会更好。

Answer 4

这将占用160x160空间而不拉伸图像

img{
    width:160px;
    height:160px; 

/*Scale down will take the necessary specified space that is 160px x 160px without stretching the image*/
    object-fit:scale-down;
}