Question

有没有办法使用ONLY CSS按比例调整大小（缩小）图像？

我正在使用JavaScript方式，但只是想看看CSS是否可以实现这一点。

Answer 1

使用CSS按比例调整图像大小：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Answer 2

控制尺寸并保持比例：

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Answer 3

如果是背景图片，请使用background-size：contains。

示例css：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Answer 4

尝试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Answer 5

请注意，width:50%会将其大小调整为<strong>可用空间的50％，而max-width:50%会将图片大小调整为<strong> 50％的自然大小即可。在将此规则用于移动网页设计时，这一点非常重要，因此应始终使用移动网页设计max-width。

Answer 6

通过保持纵横比

来缩放图像

试试这个，

img {
  max-width:100%;
  height:auto;
}

Answer 7

您可以使用 object-fit 属性：

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适合图像，而不会按比例改变。

Answer 8

2015年重访：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

我已经重新审视了它，因为所有常见的浏览器现在都有Cherif上面提到的自动工作，因此你可以更好地工作，因为你不需要知道图像是否比更高更宽。

旧版本：如果您受限于120x100的盒子，例如你可以

<img src="http://image.url" height="100" style="max-width: 120px">

Answer 9

css属性max-width和max-height工作很棒，但IE6不支持我相信IE7。您可能希望在高度/宽度上使用此值，这样您就不会意外地缩放图像。您只想按比例限制最大高度/宽度。

Answer 10

<img style="width: 50%;" src="..." />

对我来说工作得很好......或者我错过了什么？

编辑：但请参阅Shawn关于意外升迁的警告。

Answer 11

使用这种简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Answer 12

img{
    max-width:100%;
    object-fit: scale-down;
}

适合我。它缩小较大的图像以适合框，但将较小的图像留下原始大小。

Answer 13

我相信这是最简单的方法，也可以通过使用style标签中的内联<img>属性来实现。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

或

<img src="flower.png" style="transform: scale(0.7);">

Answer 14

img {
    max-width:100%;
}

div {
    width:100px;
}

使用此代码段，您可以更有效地执行此操作

Answer 15

我们可以使用媒体查询和响应式设计原则在浏览器中使用CSS调整图像大小。

db.<collection_name>.aggregate([
    {$group:{_id:"$id2",id1Set:{$addToSet:"$id1"}}},
    {$match:{"id1Set":{$size:2,$all:["1","2"]}}}
])

＆＃13;

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

＆＃13;

Answer 16

你总是需要这样的东西

html
{
    width: 100%;
    height: 100%;
}

位于css文件的顶部

Answer 17

试试这个：

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

Answer 18

image_tag("/icons/icon.gif", height: '32', width: '32') 我需要设置高度：'50px'，宽度：'50px'到图像标签，这段代码工作从第一次尝试注意我尝试了所有上面的代码，但没有运气所以这一个工作，这里是我的代码来自我的_nav.html。 ERB：
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

使用CSS按比例调整图像大小？

18 个答案: