blocks|key|1465766|text|只需设置width或height，它就会自动缩放另一个。是的，你可以使用百分比。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1465767|第一部分可以完成，但需要JavaScript，因此可能不适用于所有用户。|1465768|entityMap^0|4|5|A|6|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>Only set the <code>width</code> or <code>height</code>, and it will scale the other automatically. And yes you can use a percentage.</p>

<p>The first part can be done, but requires JavaScript, so might not work for all users.</p>


blocks|key|1466049|text|CSS就足够了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1466050|img+{
++++width+:+desired_width;
++++height:+auto;+/*to+preserve+the+aspect+ratio+of+the+image*/
}|code-block|syntax|javascript|1466051|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|$]]

<p>CSS is enough:</p>
<pre class="lang-css prettyprint-override"><code>img {
    width : desired_width;
    height: auto; /*to preserve the aspect ratio of the image*/
}
</code></pre>


blocks|key|1465966|text|不需要Javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465967|IE6+IE6+6|1465968|Percent只适用于元素的宽度，但是如果没有正确的代码，height:100%25;就不能工作。|offset|length|style|CODE|1465969|CSS|1465970|html,+body+{+height:100%25;+}+|code-block|syntax|javascript|1465971|然后使用百分比正常工作，并在调整窗口大小时动态更新。|1465972|<img+src="image.jpg"+style="height:80%25;">|1465973|您不需要width属性，宽度会随着浏览器窗口大小的改变按比例缩放。|1465974|这个小宝石，是在图像放大的情况下，它不会看起来(过度)块状(它插值)。|1465975|img+{+-ms-interpolation-mode:+bicubic;+}|1465976|Props转到此来源：Ultimate+IE6+Cheatsheet:+How+To+Fix+25%2B+Internet+Explorer+6+Bugs|1465977|entityMap|0|LINK|mutability|MUTABLE|url|http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#one-hundred-percent-height^0|0|0|T|C|0|0|0|0|0|0|0|0|B|1S|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@$F|1D|G|1E|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1F|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1G|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|10|3|11|5|6|7|1M|8|@]|9|@$F|1N|G|1O|1|1P]]|A|$]]|$1|12|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<h2>No Javascript required.</h2>

<p>IE6 Internet Explorer 6</p>

<p>Percent only works for the width of an element, but <code>height:100%;</code> does not work without the correct code.</p>

<p>CSS</p>

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

<p>Then using a percentage works properly, and dynamically updates on window resize.</p>

<pre><code>&lt;img src="image.jpg" style="height:80%;"&gt;
</code></pre>

<p>You do not need a width attribute, the width scales proportionately as the browser window size is changed.</p>

<p>And this little gem, is in case the image is scaled up, it will not look (overly) blocky (it interpolates).</p>

<pre><code>img { -ms-interpolation-mode: bicubic; }
</code></pre>

<p>Props go to this source:
<a href="http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#one-hundred-percent-height" rel="noreferrer">Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs</a></p>


blocks|key|1466011|text|在img标记中添加max-width:+100%25;对我来说很有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1466012|entityMap^0|1|3|9|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Adding <code>max-width: 100%;</code> to the <code>img</code> tag works for me.</p>


blocks|key|1465808|text|我认为最好的解决方案是通过脚本或本地重新调整图像大小，然后再次上传。记住，你强迫你的观众下载比他们需要的更大的文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465809|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think the best solution is resize the images via script or locally and upload them again.
Remember, you're forcing your viewers to download larger files than they need</p>


blocks|key|1251295|text|对于固定大小矩形中的自动信箱/列框，请使用object-fit+CSS属性。这通常是我想要的，而且它避免使用代码来确定哪个是主要维度，或者-我过去经常做的-将<SVG>元素与<image>子元素一起嵌入，以用其漂亮的preserveAspectRatio选项包装内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1251296|​|1251297|<!DOCTYPE+html>
<html>
++<head>
++++<style>
++++++:root
++++++{
++++++++--box-side+:+min(+42vmin,+480px+)+;
++++++}
++++++body
++++++{
++++++++align-items+:+center+;
++++++++display+:+flex+;+
++++++++flex-wrap+:+wrap+;
++++++++justify-content+:+center+;
++++++}
++++++body,html
++++++{
++++++++height+:+100%25+;
++++++++width+:+100%25+;
++++++}
++++++img
++++++{
++++++++background+:+grey+;
++++++++border+:+1px+solid+black+;
++++++++height+:+var(+--box-side+)+;
++++++++object-fit+:+contain+;
++++++++width+:+var(+--box-side+)+;
++++++}
++++</style>
++++<title>object-fit</title>
++</head>
++<body>
++++<img+src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png"+/>
++++<img+src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg"+/>
++++<img+src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png"+/>
++++<img+src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg">
++++<img+src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png"+/>
++</body>
</html>|code-block|syntax|javascript|1251298|1251299|entityMap^0|L|A|27|5|2F|7|30|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|O|$]]

<p>For an automatic letterbox/pillarbox in a fixed-size rectangle, use the <code>object-fit</code> CSS property.  That is usually what I want, and it avoids using code to figure out which is the dominant dimension or — what I used to do — embedding an <code>&lt;SVG&gt;</code> element with an <code>&lt;image&gt;</code> child to wrap the content with its nice <code>preserveAspectRatio</code> options.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      :root
      {
        --box-side : min( 42vmin, 480px ) ;
      }
      body
      {
        align-items : center ;
        display : flex ; 
        flex-wrap : wrap ;
        justify-content : center ;
      }
      body,html
      {
        height : 100% ;
        width : 100% ;
      }
      img
      {
        background : grey ;
        border : 1px solid black ;
        height : var( --box-side ) ;
        object-fit : contain ;
        width : var( --box-side ) ;
      }
    &lt;/style&gt;
    &lt;title&gt;object-fit&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="https://alesmith.com/wp-content/uploads/logos/ALESMITH-MasterLogoShadow01-MULTI-A.png" /&gt;
    &lt;img src="https://ballastpoint.com/wp-content/themes/ballastpoint/assets/img/bp-logo-color.svg" /&gt;
    &lt;img src="https://d2lchr2s24ssh5.cloudfront.net/wp-content/uploads/2014/01/GF19_PrimaryLogo_RGB.png" /&gt;
    &lt;img src="https://s3-us-west-1.amazonaws.com/paradeigm-social/NeFAAJ7RlCreLCi9Uk9u_pizza-port-logo.svg"&gt;
    &lt;img src="https://s3-us-west-2.amazonaws.com/lostabbey-prod/Logos/Logo_Port_SM_Circle_White.png" /&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1251019|text|我知道的最好的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1251020|1)将overflow设置为滚动，图像将保留在其中，但您可以滚动查看它|1251021|2)上传较小的图片。现在上传的时候有很多程序(你需要PHP或者.net来做这件事)，你可以让它自动缩放。|1251022|3)接受它并设置宽度和高度，这虽然会使它看起来失真，但正确的大小仍然会导致用户不得不下载全尺寸的图像。|1251023|祝好运!|1251024|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>The best way I know how to do this, is:</p>

<p>1) set overflow to scroll and that way the image would stay in but you can scroll to see it instead</p>

<p>2) upload a smaller image. Now there are plenty of programs out there when uploading (you'll need something like PHP or .net to do this btw) you can have it auto scale.</p>

<p>3) Living with it and setting the width and height, this although will make it look distorted but the right size will still result in the user having to download the full-sized image.</p>

<p>Good luck!</p>


<p>I'm trying to display some large images with HTML img tags. At the moment they go off the edge of the screen; how can I scale them to stay within the browser window?</p>

<p>Or in the likely event that this is not possible, is it possible to at least say "display this image at 50% of its normal width and height"?</p>

<p>The width and height attributes distort the image -- as far as I can tell, this is because they refer to whatever attributes the container may end up with, which will be unrelated to the image. I can't specify pixels because I have to deal with a large collection of images each with a different pixel size. Max-width doesn't work.</p>


HTML img scaling

容器

我正在尝试显示一些带有HTML img标记的大图像。目前它们离开了屏幕的边缘；我如何缩放它们以停留在浏览器窗口中？或者在可能的情况下，这是不可能的，有没有可能至少说“以正常宽度和高度的50%显示此图像”？宽度和高度属性会扭曲图像--据我所知，这是因为它们引用了容器最终可能具有的任何属性，而这些属性将与图像无关。我不能指定像素，因为我必须处理大量图像，每个图像都有不同的像素大小。最大宽度不起作用。

问HTML img缩放
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML img缩放EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML img缩放
EN