blocks|key|925577|text|如果只在图像上定义一个维度，则图像的纵横比将始终保留。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|925578|图片比你喜欢的大/高的问题吗？|925579|您可以将其放入设置为图像的最大高度/宽度的DIV中，然后设置overflow:hidden。它会裁剪出你想要的任何东西。|925580|如果图像是100%25宽和高:auto，你会认为它太高了，这是因为宽高比被保留了。您需要裁剪，或更改纵横比。|925581|请提供更多关于您正在努力实现的目标的信息，我将尝试提供更多帮助！|925582|-根据反馈进行编辑|925583|您熟悉max-width和max-height属性吗？您可以随时设置它们。如果你没有设置任何最小值，而设置了最大高度和最大宽度，那么你的图像将不会失真(纵横比将被保留)，并且它不会大于任何最长和达到最大尺寸的尺寸。|offset|length|925584|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_dim_max-width.asp|1|http://www.w3schools.com/cssref/pr_dim_max-height.asp^0|0|0|0|0|0|0|3|9|0|D|A|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@$N|16|O|17|1|18]|$N|19|O|1A|1|1B]]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|S|T|U|A|$V|Y]]]]

If you only define one dimension on an image the image aspect ratio will always be preserved.

Is the issue that the image is bigger/taller than you prefer?

You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.

If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.

Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!

--- EDIT BASED ON FEEDBACK ---

Are you familiar with the <a href="http://www.w3schools.com/cssref/pr_dim_max-width.asp" rel="noreferrer">max-width</a> and <a href="http://www.w3schools.com/cssref/pr_dim_max-height.asp" rel="noreferrer">max-height</a> properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.

blocks|key|1140101|text|通过将CSS+max-width属性设置为100%25，图像将填充其父元素的宽度，但不会呈现大于其实际大小的宽度，从而保持分辨率。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1140102|将height属性设置为auto将保持图像的纵横比，使用此技术将允许覆盖静态高度，并允许图像在所有方向上按比例弯曲。|1140103|img+{
++++max-width:+100%25;
++++height:+auto;++++++
}|code-block|syntax|javascript|1140104|entityMap^0|7|9|L|4|0|1|6|C|4|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|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

By setting the CSS <code>max-width</code> property to <code>100%</code>, an image will fill the width of it's parenting element, but won’t render larger than it's actual size, thus preserving resolution. 

Setting the <code>height</code> property to <code>auto</code> maintains the aspect ratio of the image, using this technique allows static height to be overridden and enables the image to flex proportionally in all directions.

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

blocks|key|1140168|text|几年后，为了满足同样的需求，我发现了一个使用background-size的CSS选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140169|它应该可以在现代浏览器(IE9%2B)中工作。|1140170|<div+id="container"+style="background-image:url(myimage.png)">
</div>|code-block|syntax|javascript|1140171|和风格：|1140172|#container
{
++width:++100px;+/*or+70%25,+or+what+you+want*/
++height:+200px;+/*or+70%25,+or+what+you+want*/
++background-size:+cover;
++background-position:+center;
++background-repeat:+no-repeat;
}|1140173|参考资料：http://www.w3schools.com/cssref/css3_pr_background-size.asp|offset|length|1140174|演示：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size|1140175|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/css3_pr_background-size.asp|1|http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size^0|0|0|0|0|0|5|1N|0|0|3|23|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$O|1C|P|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

Some years later, looking for the same requirement, I found a CSS option using background-size.

It is supposed to work in modern browsers (IE9+).

<pre><code>&lt;div id="container" style="background-image:url(myimage.png)"&gt;
&lt;/div&gt;
</code></pre>

And the style:

<pre><code>#container
{
 width: 100px; /*or 70%, or what you want*/
 height: 200px; /*or 70%, or what you want*/
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
</code></pre>

The reference: <a href="http://www.w3schools.com/cssref/css3_pr_background-size.asp">http://www.w3schools.com/cssref/css3_pr_background-size.asp</a>

And the demo: <a href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size">http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size</a>

blocks|key|925754|text|这是一个非常简单的解决方案，我是在遵循conca的链接并查看背景大小后想到的。它放大图像，然后在没有缩放的情况下将其放入外部容器的中心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|925755|<style>
#cropcontainer
{
++width:++100%25;+
++height:+100%25;+
++background-size:+140%25;
++background-position:+center;
++background-repeat:+no-repeat;
}
</style>

<div+id="cropcontainer"+style="background-image:+url(yoururl);+/>|code-block|syntax|javascript|925756|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|$]]

This is a very straightforward solution that I came up with after following conca's link and looking at background size. It blows the image up and then fits it centered into the outer container w/o scaling it.

<pre><code>&lt;style&gt;
#cropcontainer
{
 width: 100%; 
 height: 100%; 
 background-size: 140%;
 background-position: center;
 background-repeat: no-repeat;
}
&lt;/style&gt;

&lt;div id="cropcontainer" style="background-image: url(yoururl); /&gt;
</code></pre>

blocks|key|1140302|text|最好在应考虑纵横比的尺寸上使用auto。如果不将其他属性设置为auto，现在的大多数浏览器都会假定您希望遵守宽高比，但不是所有浏览器(例如，windows+phone+8上的IE10不会)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140303|width:+100%25;
height:+auto;|code-block|syntax|javascript|1140304|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|$]]

Its best to use auto on the dimension that should respect the aspect ratio. If you do not set the other property to auto, most browsers nowadays will assume that you want to respect the aspect ration, but not all of them (IE10 on windows phone 8 does not, for example)

<pre><code>width: 100%;
height: auto;
</code></pre>

blocks|key|925868|text|使用JQuery是一种普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|925869|CSS不可能做你想要的事情:图像的宽度应该是100%25，但是如果这个宽度导致高度太大，就应该应用max-height+--当然，正确的比例应该保留下来。|925870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Use JQuery or so, as CSS is a general misconception (the countless questions and discussions here about simple design goals show that). 

It is not possible with CSS to do what you seem to wish: image shall have width of 100%, but if this width results in a height that is too large, a max-height shall apply - and of course the correct proportions shall be preserved.

blocks|key|925903|text|我想这就是你要找的，我自己也在找，但是在我找到代码之前我又想起来了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|925904|background-repeat:+repeat-x;
background-position:+top;
background-size:auto;
background-attachment:+fixed;|code-block|syntax|javascript|925905|数字化的发展正在进行中。|925906|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|$]]

I think this is what your looking for, i was looking for it my self, but then i remembered it again befor i found the code.

<pre><code>background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;
</code></pre>

digital evolution is on its way.

blocks|key|1140413|text|也有同样的问题。对我来说，问题是在其他地方也已经定义了height属性，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140414|.img{
++++max-width:+100%25;
++++max-height:+100%25;
++++height:+inherit+!important;
}|code-block|syntax|javascript|1140415|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|$]]

Had the same issue. The problem for me was that the height property was also already defined elsewhere, fixed it like this:

<pre><code>.img{
 max-width: 100%;
 max-height: 100%;
 height: inherit !important;
}
</code></pre>

blocks|key|1140456|text|我不是来讨论老问题的但是..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140457|#container+img+{
++++++max-width:100%25;
++++++height:auto+!important;
}|code-block|syntax|javascript|1140458|即使这是不合适的，因为你在高度上使用了!important覆盖，如果你使用像WordPress这样的CMS来为你设置高度和宽度，这是很好的。|1140459|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|$]]

Not to jump into an old issue, but...

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

Even though this is not proper as you use the !important override on the height, if you're using a CMS like WordPress that sets the height and width for you, this works well.

blocks|key|926017|text|我将其用于高度和宽度固定的矩形容器，但具有不同大小的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|926018|img+{
++max-width:+95%25;
++max-height:+15em;
++width:+auto+!important;
}|code-block|syntax|javascript|926019|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|$]]

I use this for a rectangular container with height and width fixed, but with images of different sizes.

<pre><code>img {
 max-width: 95%;
 max-height: 15em;
 width: auto !important;
}
</code></pre>

blocks|key|1140562|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140563|min-height:+100%25;
min-width:+100%25;
width:+auto;
height:+auto;
margin:+0;
padding:+0;|code-block|syntax|javascript|1140564|顺便说一下，如果你想让它在父div容器中居中，你可以添加这些css属性：|1140565|position:+absolute;
top:+50%25;
left:+50%25;
transform:+translate(-50%25,+-50%25);|1140566|它应该真的像预期的那样工作:)|1140567|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|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simple solution:

<pre><code>min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
</code></pre>

By the way, if you want to center it in a parent div container, you can add those css properties: 

<pre><code>position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
</code></pre>

It should really work as expected :)

blocks|key|926119|text|简单优雅的工作解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|926120|img+{
++width:+600px;++/*width+of+parent+container*/
++height:+350px;+/*height+of+parent+container*/
++object-fit:+contain;
++position:+relative;
++top:+50%25;
++transform:+translateY(-50%25);
}|code-block|syntax|javascript|926121|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|$]]

Simple elegant working solution:

<pre><code>img {
 width: 600px; /*width of parent container*/
 height: 350px; /*height of parent container*/
 object-fit: contain;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}
</code></pre>

Currently, with STYLE, I can use <code>width: 100%</code> and <code>auto</code> on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.

Any ideas?

CSS: 100% width or height while keeping aspect ratio?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

目前，对于STYLE，我可以在高度上使用width: 100%和auto (反之亦然)，但我仍然不能将图像限制在特定的位置，无论是太宽还是太高。有什么想法吗？

问CSS: 100%宽或高，同时保持纵横比？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS: 100%宽或高，同时保持纵横比？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS: 100%宽或高，同时保持纵横比？
EN