blocks|key|1574484|text|要使用CSS按比例调整图像大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574485|img.resize+{
++++width:540px;+/*+you+can+use+%25+*/
++++height:+auto;
}|code-block|syntax|javascript|1574486|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To resize the image proportionally using CSS:

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

blocks|key|1359591|text|控制大小和保持比例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359592|#your-img+{
++++height:+auto;+
++++width:+auto;+
++++max-width:+300px;+
++++max-height:+300px;
}|code-block|syntax|javascript|1359593|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Control size and maintain proportion :

<pre><code>#your-img {
 height: auto; 
 width: auto; 
 max-width: 300px; 
 max-height: 300px;
}
</code></pre>

blocks|key|1359761|text|如果它是一个背景图片，使用background-size:contain。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1359762|示例css：|1359763|#your-div+{
++background:+url('image.jpg')+no-repeat;
++background-size:contain;
}|code-block|syntax|javascript|1359764|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If it's a background image, use background-size:contain.

Example css:

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

blocks|key|1574934|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574935|transform:+scale(0.5,+0.5);
-ms-transform:+scale(0.5,+0.5);
-webkit-transform:+scale(0.5,+0.5);|code-block|syntax|javascript|1574936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try

<pre><code>transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
</code></pre>

blocks|key|1574874|text|通过保持图像的纵横比缩放图像的步骤|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574875|尝尝这个,|1574876|img+{
++max-width:100%25;
++height:auto;
}|code-block|syntax|javascript|1574877|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To scale an image by keeping its aspect ratio

Try this,

<pre><code>img {
 max-width:100%;
 height:auto;
}
</code></pre>

blocks|key|1574579|text|2015年重温：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574580|<img+src="http://imageurl"+style="width:+auto;+height:+auto;max-width:+120px;max-height:+100px">|code-block|syntax|javascript|1574581|我重新考虑过它，因为所有常见的浏览器现在都有上面谢里夫建议的自动工作，所以它工作得更好，因为你不需要知道图像是否比高更宽。|1574582|旧版本:例如，如果您受到120x100的限制，您可以这样做|1574583|<img+src="http://image.url"+height="100"+style="max-width:+120px">|1574584|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Revisited in 2015:

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

I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.

older version:
If you are limited by box of 120x100 for example you can do 

<pre><code>&lt;img src="http://image.url" height="100" style="max-width: 120px"&gt;
</code></pre>

blocks|key|1359984|text|img{
++++max-width:100%25;
++++object-fit:+scale-down;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1359985|这对我很有效。它缩小较大的图像以适应方框，但保留较小的图像的原始大小。|unstyled|1359986|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>img{
 max-width:100%;
 object-fit: scale-down;
}
</code></pre>

works for me. It scales down larger images to fit in the box, but leaves smaller images their original size.

blocks|key|1575305|text|我相信这是最简单的方法，也可以通过<img>标记中的内联style属性使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1575306|.scaled
{
++transform:+scale(0.7);+/*+Equal+to+scaleX(0.7)+scaleY(0.7)+*/
}

<img+src="flower.png"+class="scaled">|code-block|syntax|javascript|1575307|或|1575308|<img+src="flower.png"+style="transform:+scale(0.7);">|1575309|entityMap^0|H|5|S|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

I believe this is the easiest way to do it, also possible using through the inline <code>style</code> attribute within the <code>&lt;img&gt;</code> tag.

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

&lt;img src="flower.png" class="scaled"&gt;
</code></pre>

or

<pre><code>&lt;img src="flower.png" style="transform: scale(0.7);"&gt;
</code></pre>

blocks|key|1575051|text|使用这个简单的缩放技术|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1575052|img+{
++++max-width:+100%25;
++++height:+auto;
}
@media+{
++img+{+
++++width:+auto;+/*+for+ie+8+*/
++}
}|code-block|syntax|javascript|1575053|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use this easy scaling technique 

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

blocks|key|1359625|text|img+{
++++max-width:100%25;
}

div+{
++++width:100px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1359626|使用此代码段，您可以以更有效的方式完成此操作|unstyled|1359627|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>img {
 max-width:100%;
}

div {
 width:100px;
}
</code></pre>

with this snippet you can do it in a more efficient way

blocks|key|1360038|text|我们可以在浏览器中使用CSS调整图像的大小，使用媒体查询和响应式设计的原则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1360039|++++@media+screen+and+(orientation:+portrait)+{
img.ri+{
++++max-width:+80%25;
++}
}|code-block|syntax|javascript|1360040|​|1360041|@media+screen+and+(orientation:+landscape)+{
++img.ri+{+max-height:+80%25;+}
}|1360042|1360043|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

We can resize image using CSS in the browser using media queries and the principle of responsive design.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (orientation: landscape) {
 img.ri { max-height: 80%; }
}</code></pre>
</div>
</div>

blocks|key|1574978|text|你总是需要这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1574979|html
{
++++width:+100%25;
++++height:+100%25;
}|code-block|syntax|javascript|1574980|在css文件的顶部|1574981|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You always need something like this

<pre><code>html
{
 width: 100%;
 height: 100%;
}
</code></pre>

at the top of your css file

blocks|key|1575072|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1575073|div.container+{
++++max-width:+200px;//real+picture+size
++++max-height:+100px;
}

/*+resize+images+*/
div.container+img+{
++++width:+100%25;
++++height:+auto;
}|code-block|syntax|javascript|1575074|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

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

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

blocks|key|1360111|text|image_tag("/icons/icon.gif",+height:+'32',+width:+'32')我需要设置图像标签的高度：'50px'，宽度：'50px‘，这段代码从第一次尝试就可以工作了。注意，我尝试了上面所有的代码，但是没有成功，所以这段代码可以工作，下面是我的_nav.html.erb代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1360112|<%25=+image_tag("#{current_user.image}",++height:+'50px',+width:+'50px')+%25>|1360113|entityMap^0|0|1J|0|0|21|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<code>image_tag("/icons/icon.gif", height: '32', width: '32')</code>
I need to set height: '50px', width: '50px' to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my _nav.html.erb: 
 <code>&lt;%= image_tag("#{current_user.image}", height: '50px', width: '50px') %&gt;</code>

Is there a way to resize (scale down) images proportionally using ONLY CSS?

I'm doing the JavaScript way, but just trying to see if this is possible with CSS.

Resize image proportionally with CSS?

有没有办法只用CSS就能按比例调整(缩小)图片的大小？我正在使用JavaScript的方式，但只是想看看是否可以使用CSS。

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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