用CSS调整图片的比例？

有没有一种方法可以只用CSS来调整（缩小）图片的比例？

我正在用JavaScript的方法，但只是想看看用CSS是否可行。

Vadim Ovchinnikov
已编辑的问题 11日 三月 2018 в 11:16
编程
html css image-resizing
24日 四月 2009 в 11:40
34 种观点
对该问题的评论 (3)

使用CSS来调整图片的比例大小。

img.resize {
    width:540px; /* you can use % */
    height: auto;
}
Zanon
编辑本段答案13日 六月 2017 в 8:51
评论(9)

控制规模，保持比例 。

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}
Cherif
编辑本段答案2日 七月 2015 в 10:24
评论(4)

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

示例css:

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

试试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
评论(5)

注意，width:50%会将其调整为图片可用空间的50%，而max-width:50%会将图片调整为自然尺寸的50%。 这一点在移动网页设计中使用该规则时非常重要，所以在移动网页设计中应始终使用max-width。

评论(4)

通过保持图像的长宽比来缩放图像

试试这个

img {
  max-width:100%;
  height:auto;
}
Prasanth K C
编辑本段答案25日 七月 2016 в 6:58
评论(0)

您可以使用object-fit属性。

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

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

评论(4)

2015年重新审视。

我'已经重新审视了它，因为所有常见的浏览器现在有工作的自动建议Cherif上面，所以，工作甚至更好，因为你不需要知道如果图像是宽比高。

旧版本。 如果你被120x100的盒子限制了，比如你可以做到

PetrV
编辑本段答案11日 九月 2015 в 10:06
评论(0)

css属性max-width和max-height的效果**很好，但不被IE6和我相信IE7支持。你想在高度/宽度之上使用这个属性，这样你就不会不小心把图片放大。你只想按比例限制最大高度/宽度。

评论(3)

对我来说是很好的 ...还是我错过了什么？

编辑：但请看Shawn'关于意外增大尺寸的注意事项。

Thanatos
编辑本段答案23日 一月 2017 в 8:55
评论(2)
 
img{
    max-width:100%;
    object-fit: scale-down;
}

对我来说是可行的。 它可以缩小较大的图像以适应框内的尺寸，但保留较小图像的原始尺寸。

评论(0)

使用这个简单的缩放技术

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}
评论(0)

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

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

或

评论(1)
img {
    max-width:100%;
}

div {
    width:100px;
}

有了这个代码段，你可以用更有效的方式来做。

评论(0)

我们可以在浏览器中利用媒体查询和响应式设计的原理，使用CSS来调整图片的大小。

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

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

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

<！--结束片段-->

评论(0)

试试这个。

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

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}
评论(0)

你总是需要这样的东西

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

在你的css文件的顶部

评论(1)

image_tag("/icons/icon.gif", height: &#39;32&#39;, width: &#39;32&#39;) 我需要设置高度。 '50px', width: '50px'，宽度：'50px'。 图片标签，这段代码从第一次尝试就开始工作了，我试过以上所有的代码，但没有运气，所以这段代码可以工作，这是我的_nav.html.erb的代码。 <%= image_tag("#{current_user.image}", height: &#39;50px&#39;, width: &#39;50px&#39;) %>。

neo7
编辑本段答案31日 一月 2018 в 3:45
评论(1)