blocks|key|240021|text|不要设置高度和宽度。使用一种或另一种，将保持正确的纵横比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240022|​|240023|.widthSet+{
++++max-width:+64px;
}

.heightSet+{
++++max-height:+64px;
}|code-block|syntax|javascript|240024|<img+src="http://placehold.it/200x250"+/>

<img+src="http://placehold.it/200x250"+width="64"+/>

<img+src="http://placehold.it/200x250"+height="64"+/>

<img+src="http://placehold.it/200x250"+class="widthSet"+/>

<img+src="http://placehold.it/200x250"+class="heightSet"+/>|240025|240026|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Don't set height AND width. Use one or the other and the correct aspect ratio will be maintained.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://placehold.it/200x250" /&gt;

&lt;img src="http://placehold.it/200x250" width="64" /&gt;

&lt;img src="http://placehold.it/200x250" height="64" /&gt;

&lt;img src="http://placehold.it/200x250" class="widthSet" /&gt;

&lt;img src="http://placehold.it/200x250" class="heightSet" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|240152|text|这是一个示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240153|​|240154|div{
+++width:+200px;
+++height:200px;
+++border:solid
+}

img{
++++width:+100%25;
++++height:+100%25;
++++object-fit:+contain;
++++}|code-block|syntax|javascript|240155|<div>
++<img+src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>|240156|240157|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>here is the sample one</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>




blocks|key|457124|text|将图像的width和height设置为auto，但同时限制max-width和max-height|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|457125|img+{
++++max-width:64px;
++++max-height:64px;
++++width:auto;
++++height:auto;
}|code-block|syntax|javascript|457126|Fiddle|457127|如果你想在64x64px的“帧”中显示任意大小的图像，你可以使用内联块包装器并对它们进行定位，比如in+this+fiddle。|457128|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xaesA/3/|1|http://jsfiddle.net/xaesA/2/^0|4|5|A|6|J|4|T|9|13|A|0|0|0|6|0|0|1D|E|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|M|3|N|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|O|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>Set <code>width</code> and <code>height</code> of the images to <code>auto</code>, but limit both <code>max-width</code> and <code>max-height</code>:</p>

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

<p><a href="http://jsfiddle.net/xaesA/3/" rel="noreferrer">Fiddle</a></p>

<p>If you want to display images of arbitrary size in the 64x64px "frames", you can use inline-block wrappers and positioning for them, like <a href="http://jsfiddle.net/xaesA/2/" rel="noreferrer">in this fiddle</a>.</p>


blocks|key|457097|text|<img+src="Runtime+Path+to+photo"
+++++style="border:+1px+solid+#000;+max-width:64px;+max-height:64px;">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|457098|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;"&gt;
</code></pre>


blocks|key|240264|text|在html元素img的css中使用object-fit:+contain。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|240265|例如：|240266|img+{
++++...
++++object-fit:+contain
++++...
}|code-block|syntax|javascript|240267|entityMap^0|7|3|H|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Use <code>object-fit: contain</code> in css of html element <code>img</code>.</p>
<p>ex:</p>
<pre class="lang-css prettyprint-override"><code>img {
    ...
    object-fit: contain
    ...
}
</code></pre>


blocks|key|457156|text|列出的方法中没有一种在保持所需纵横比的情况下，将图像缩放到适合方框的最大尺寸。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|457157|使用IMG标记无法做到这一点(至少不能在没有一点JavaScript的情况下做到这一点)，但可以按如下方式完成：|457158|+<div+style="background:center+no-repeat+url(...);background-size:contain;width:...;height:..."></div>|code-block|syntax|javascript|457159|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|$]]

<p>None of the methods listed scale the image to the largest possible size that fits in a box while retaining the desired aspect ratio.</p>

<p>This cannot be done with the IMG tag (at least not without a bit of JavaScript), but it can be done as follows:</p>

<pre><code> &lt;div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."&gt;&lt;/div&gt;
</code></pre>


blocks|key|457005|text|将图像包装在尺寸为64x64的div中，并将width:+inherit设置为图像：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|457006|<div+style="width:+64px;+height:+64px;">
++++<img+src="Runtime+path"+style="width:+inherit"+/>
</div>|code-block|syntax|javascript|457007|entityMap^0|F|3|M|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Wrap the image in a <code>div</code> with dimensions 64x64 and set <code>width: inherit</code> to the image:    </p>

<pre><code>&lt;div style="width: 64px; height: 64px;"&gt;
    &lt;img src="Runtime path" style="width: inherit" /&gt;
&lt;/div&gt;
</code></pre>


blocks|key|240216|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240217|<img+src="Runtime+Path+to+photo"+border="1"+height="64"+width="64"+object-fit="cover">|code-block|syntax|javascript|240218|添加object-fit="cover“将强制图像在不丢失纵横比的情况下占用空间。|240219|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|$]]

<p>Try this:</p>

<pre><code>&lt;img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover"&gt;
</code></pre>

<p>Adding object-fit="cover" will force the image to take up the space without losing the aspect ratio.</p>


blocks|key|457092|text|为什么不使用单独的CSS文件来保持想要显示的图像的高度和宽度呢？这样，您就可以提供必要的宽度和高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|457093|例如：|457094|+++++++image+{
+++++++width:+64px;
+++++++height:+64px;
+++++++}|code-block|syntax|javascript|457095|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|$]]

<p>Why don't you use a separate CSS file to maintain the height and the width of the image you want to display? In that way, you can provide the width and height necessarily. </p>

<p>eg:             </p>

<pre><code>       image {
       width: 64px;
       height: 64px;
       }
</code></pre>


blocks|key|240395|text|有一个新的CSS属性aspect-ratio。它设置框的首选纵横比，将在计算自动大小和一些其他布局功能时使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|240396|img+{
++width:+100%25;
++aspect-ratio:+16/9;
}|code-block|syntax|javascript|240397|它在所有分布良好的浏览器中都受支持。|240398|MDN链接：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio|240399|https://web.dev/aspect-ratio/包含了使用该属性的很好的示例|240400|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio|1|https://web.dev/aspect-ratio/^0|A|C|0|0|0|6|1P|0|0|0|T|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|P|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>There's a new CSS property <code>aspect-ratio</code>. It sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.</p>
<pre><code>img {
  width: 100%;
  aspect-ratio: 16/9;
}
</code></pre>
<p>It's supported in all well spread browsers.<br />
MDN link: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio</a><br />
And <a href="https://web.dev/aspect-ratio/" rel="nofollow noreferrer">https://web.dev/aspect-ratio/</a> contains good examples of using that property</p>


blocks|key|240423|text|我的网站显示许多照片(具有各种宽高比)，单击其中一张会以模式打开它。为了使其适合模式而不进行裁剪、滚动或扭曲，我在img标记上使用了以下类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240424|.img+{
++max-height:+100%25;
++max-width:+100%25;
++object-fit:+scale-down;
}|code-block|syntax|javascript|240425|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>My site displays a number of photos (with a variety of aspect ratios) and clicking one opens it in a modal. To get it to fit into the modal without cropping, scrolling, or distortion I used the following class on my img tag</p>
<pre><code>.img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}
</code></pre>


blocks|key|457427|text|您需要一个div来包装您的图像，以具有一致的纵横比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|457428|您可以使用填充底部技巧来强制div遵守纵横比和绝对定位的图像来填充空间。|457429|图像也将具有响应性，占用所有可用的水平空间。|457430|​|457431|.img-frame{
++width:+100%25;
++padding-bottom:+100%25;
++background:+gray;
++overflow:+hidden;
++position:+relative;
}

.img-frame-4by3{
++padding-bottom:+75%25;
}

.img-frame-16by9{
++padding-bottom:+56.25%25;
}


.img-frame-5by1{
++padding-bottom:+20%25;
}


.img-frame+img{
++position:+absolute;
++left:+0;
++top:+0;
++width:+100%25;
++height:+100%25;
++object-fit:+cover;
}|code-block|syntax|javascript|457432|<div+style="max-width:100px;+margin:+1rem+auto;">
++
++<p>4:3</p>
++<div+class="img-frame+img-frame-4by3">
++++<img+src="http://placekitten.com/g/400/400"+/>
++</div>
++
++<br+/>
++
++<p>16:9</p>
++<div+class="img-frame+img-frame-16by9">
++++<img+src="http://placekitten.com/g/400/400"+/>
++</div>
++
++<br+/>
++
++<p>5:1</p>
++<div+class="img-frame+img-frame-5by1">
++++<img+src="http://placekitten.com/g/400/400"+/>
++</div>
++
</div>|457433|457434|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>You need a div to wrap your image to have a consistente aspect ratio.</p>
<p>You can use the padding-bottom trick to force the div to respect an aspect ratio and a absolute positioned image to fill the space.</p>
<p>The image will be also responsive, taking all the horizontal space available.</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-css lang-css prettyprint-override"><code>.img-frame{
  width: 100%;
  padding-bottom: 100%;
  background: gray;
  overflow: hidden;
  position: relative;
}

.img-frame-4by3{
  padding-bottom: 75%;
}

.img-frame-16by9{
  padding-bottom: 56.25%;
}


.img-frame-5by1{
  padding-bottom: 20%;
}


.img-frame img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="max-width:100px; margin: 1rem auto;"&gt;
  
  &lt;p&gt;4:3&lt;/p&gt;
  &lt;div class="img-frame img-frame-4by3"&gt;
    &lt;img src="http://placekitten.com/g/400/400" /&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;p&gt;16:9&lt;/p&gt;
  &lt;div class="img-frame img-frame-16by9"&gt;
    &lt;img src="http://placekitten.com/g/400/400" /&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;p&gt;5:1&lt;/p&gt;
  &lt;div class="img-frame img-frame-5by1"&gt;
    &lt;img src="http://placekitten.com/g/400/400" /&gt;
  &lt;/div&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|240308|text|使用css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240309|.img+{
++++display:table-cell;
++++max-width:...px;
++++max-height:...px;
++++width:100%25;
}|code-block|syntax|javascript|240310|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>With css:</p>
<pre class="lang-css prettyprint-override"><code>.img {
    display:table-cell;
    max-width:...px;
    max-height:...px;
    width:100%;
}
</code></pre>


blocks|key|457355|text|这张海报展示了在大多数情况下他发布的>>>+(256x256,1024x768,500x400,205x246等)受高度限制的尺寸。但是适合64px的最大高度像素尺寸，这是大多数景观“照片”的典型。所以我猜他想要一个始终是64像素高的图像。要实现这一点，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|457356|<img+id="photo1"+style="height:64px;width:auto;"+src="photo.jpg"+height="64"+/>|code-block|syntax|javascript|457357|这个解决方案保证了图像的最大高度为64像素，并允许根据每个图像的纵横比来扩展或缩小宽度。在img+height属性中将height设置为64会在图像下载时在浏览器的Rendertree布局中保留一个空间，这样内容就不会在等待图像下载时移动。此外，新的HTML5标准并不总是支持宽度和高度属性。它们只是维度的“暗示”，而不是图像的最终维度。如果在样式表中重置或更改图像的高度和宽度，则图像属性中的实际值将重置为您的CSS值或图像的本机默认尺寸。将CSS+height设置为"64px“并将width设置为"auto”将强制width从本机图像宽度(而不是图像属性宽度)开始，然后使用CSS样式计算新的高宽比。这会给你带来一个新的宽度。所以这里实际上不需要高度和宽度"img“属性，只需要强制浏览器做额外的计算。|offset|length|style|CODE|457358|entityMap^0|0|0|1D|6|6A|6|6R|5|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|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

<p>The poster is showing a dimension constrained by height in most cases he posted &gt;&gt;&gt; (256x256, 1024x768, 500x400, 205x246, etc.) but fitting a 64px max height pixel dimension, typical of most landscape &quot;photos&quot;. So my guess is he wants an image that is always 64 pixels in height. To achieve that, do the following:</p>
<pre><code>&lt;img id=&quot;photo1&quot; style=&quot;height:64px;width:auto;&quot; src=&quot;photo.jpg&quot; height=&quot;64&quot; /&gt;
</code></pre>
<p>This solution guarantees the images are all 64 pixels max in height and allows width to extend or shrink based on each image's aspect ratio. Setting height to 64 in the img <code>height</code> attribute reserves a space in the browser's Rendertree layout as images download, so the content doesn't shift waiting for images to download. Also, the new HTML5 standard does not always honor width and height attributes. They are dimensional &quot;hints&quot; only, not final dimensions of the image. If in your style sheet you reset or change the image height and width, the actual values in the images attributes get reset to either your CSS value or the images native default dimensions. Setting the CSS <code>height</code> to &quot;64px&quot; and the <code>width</code> to &quot;auto&quot; forces width to start with the native image width (not image attribute width) and then calculate a new aspect-ratio using the CSS style for height. That gets you a new width. So the height and width &quot;img&quot; attributes are really not needed here and just force the browser to do extra calculations.</p>


<p>I am using an img tag of HTML to show a photo in our application. I have set both its height and width attribute to 64. I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes of an img tag to 64, it's not maintaining the aspect ratio, so the image looks distorted.</p>

<p>For your reference my exact code is:</p>

<pre><code>&lt;img src="Runtime Path to photo" border="1" height="64" width="64"&gt;
</code></pre>


How to maintain aspect ratio using HTML IMG tag

HTML5

我使用HTML的img标记在我们的应用程序中显示照片。我已经将其高度和宽度属性都设置为64。我需要显示任何图像分辨率(例如256x256、1024x768、500x400、205x246等)为64x64。但是，通过将img标记的高度和宽度属性设置为64，它不会保持纵横比，因此图像看起来失真。供您参考，我的确切代码是：<img src="Runtime Path to photo" border="

问如何使用HTML IMG标签保持纵横比
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML IMG标签保持纵横比EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML IMG标签保持纵横比
EN