保持宽高比的图像最大高度和最大宽度
[英]Image max height and max width while preserving aspect ratio
问题描述
Is it possible to give max-height and max-width to an image while preserving aspect ratio without using js?
是否可以在不使用 js 的情况下在保持纵横比的同时为图像提供最大高度和最大宽度？
For example, I want an image to be with a height of 38px and the width auto.例如，我希望图像的高度为 38px，宽度为 auto。 If the width is higher than 200px, I want the width to be 200px and the height auto.如果宽度大于 200px，我希望宽度为 200px，高度为 auto。
If it's not possible without js, does anyone have an idea how to do it with js and without resizing the image after it's already loaded?如果没有 js 是不可能的，有没有人知道如何使用 js 并且在加载图像后不调整图像大小？
6 个解决方案
解决方案1
1 2020-12-06 17:19:31
There is a built in CSS style called max-width and max-height and I really do not think min-width exists, incase you are wondering.有一个名为max-width和max-height的内置 CSS 样式，我真的不认为min-width存在，以防你想知道。 You can refer to the example below to understand better.您可以参考下面的示例以更好地理解。 Also I am using text instead of an image, but you should get the idea.此外，我使用的是文本而不是图像，但你应该明白了。
I have nested the actual div instead another div so you could play around with the resizing.我嵌套了实际的 div 而不是另一个 div，这样您就可以调整大小了。
#con { resize: both; overflow: auto; } #box { /*Here you could say auto instead*/ height: 200px; max-width: 200px; }
<,DOCTYPE html /> <html> <head></head> <body> <div id="con"> <div id="box">Lorem ipsum dolor sit amet. consectetur adipiscing elit, Vivamus dapibus auctor ipsum. in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum, Vestibulum blandit erat vestibulum, ullamcorper augue vitae. accumsan mi, Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo. a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque, Vestibulum et magna mollis, consequat nibh ut. facilisis orci, Phasellus fermentum sodales libero. et vehicula enim ornare ut. Donec non bibendum metus, Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus. at gravida diam ipsum ut metus, Etiam orci felis, dapibus id cursus eu. dapibus ut augue, Proin a leo viverra, tempus ipsum nec. lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div> </div> </body> </html>
解决方案2
1 2020-12-06 18:38:16
Using both width auto and height auto will give to following code.同时使用 width auto 和 height auto 将给出以下代码。 To center horizontal I used the align-items center of the flexbox.为了水平居中，我使用了 flexbox 的对齐项目中心。
.container, .container * { box-sizing: border-box; }.container { display: flex; width: 800px; margin: 10px auto; }.img { display: flex; align-items: center; width: 25%; height: 150px; border: 2px solid silver; }.img img { display: block; border: 0; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto; }
<div class="container"> <div class="img"> <img src="http://placekitten.com/200/300" alt=""> </div> <div class="img"> <img src="http://placekitten.com/300/200" alt=""> </div> <div class="img"> <img src="http://placekitten.com/250/350" alt=""> </div> <div class="img"> <img src="http://placekitten.com/350/200" alt=""> </div> </div>
解决方案3
1 2020-12-08 04:54:40
You have to use max-width and height and object-fit CSS properties for image.. see example您必须为图像使用max-width和height以及object-fit CSS 属性。请参见示例
.img img { max-width: 200px; height: 38px; object-fit: contain; object-position: left; }
<div class="img"><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>
Hope it works... if any question comment pls希望它有效...如果有任何问题请评论
解决方案4
1 2020-12-09 11:50:00
Here are 2 examples of the solution I think would work, the first image has less than width: 200px;这是我认为可行的解决方案的 2 个示例，第一个图像的width: 200px; and the second one has more than width: 200px;第二个的width: 200px;
Again, I'm not sure if it would work for you, but I think it would, and if it doesn't I would love to know why.再一次，我不确定它是否适合你，但我认为它会，如果它不会，我很想知道为什么。
<style> img { max-width: 200px; height: auto; } </style> <img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test"> <br> <img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">
解决方案5
1 已采纳 2020-12-09 17:24:00
You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%.您可以将图像嵌套在 200x38 的容器中，然后将图像的max-width和max-height设置为 100%。 Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):这是一个工作片段（我已经包含了 JS 以使其具有交互性，但这不是必需的。尝试使用滑块调整容器的大小）：
var width = document.getElementById("width"); var height = document.getElementById("height"); var widthInput = document.getElementById("widthInput"); var heightInput = document.getElementById("heightInput"); var imageContainer = document.querySelector("div"); widthInput.addEventListener("input", function() { width.innerHTML = this.value + "px"; imageContainer.style.width = this.value + "px"; }); heightInput.addEventListener("input", function() { height.innerHTML = this.value + "px"; imageContainer.style.height = this.value + "px"; });
div { width: 200px; height: 200px; border: 1px dashed #000; }.image { display: block; max-width: 100%; max-height: 100%; background: #333; }
<div> <img class="image" src="https://via.placeholder.com/400"/> </div> <br/> <label>Width: <span id="width">200px</span></label> <br/> <input id="widthInput" type="range" min="0" max="400"/> <br/> <label>Height: <span id="height">200px</span></label> <br/> <input id="heightInput" type="range" min="0" max="400"/>
You can notice that however you change the dimensions of the container, the image is still contained within it.您会注意到，无论您如何更改容器的尺寸，图像仍包含在其中。 By setting the container to 200px wide by 38px tall, you can force the image to stay within the limits 0px ≤ width ≤ 200px and 0px ≤ height ≤ 38px .通过将容器设置为 200px 宽 x 38px 高，您可以强制图像保持在0px ≤ width ≤ 200px和0px ≤ height ≤ 38px的范围内。
解决方案6
0 2020-10-27 13:24:20
Specifying height or width will keep the aspect ratio.指定高度或宽度将保持纵横比。 Specifying both the max-height and max-width will keep the aspect ratio.同时指定 max-height 和 max-width 将保持纵横比。 Specifying height and max-height makes no sense.指定高度和最大高度没有意义。 Specifying height and max-width cannot guarantee your aspect ratio.指定高度和最大宽度不能保证您的纵横比。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.