logo标签列表

响应式图片与最大高度和最大宽度

htmlcss
7
我有这段HTML和CSS。
<div class="kalim"><img  src=""></div>

CSS

.kalim {display: inline-block;}

.kalim img {max-width: 800px;width: auto;max-height: 800px;}

这段代码的问题在于当浏览器调整大小时，图像的宽度不会自动响应。如果我设置width:100%，那么高度超过800像素的肖像图像将变形。
有没有解决方法，使图像具有响应性并且还具有最大高度和最大宽度设置？
4个回答
14
你应该将宽度限制添加到外层元素而不是图像上。外部元素不会超过你的最大宽度和最大高度，但图像的宽度始终为100％。这样您的图像将是响应式的。
html
 <div class="kalim"><img src=""></div>

CSS

.kalim {display: inline-block; max-width: 800px; max-height: 800px;}

.kalim img {max-width: 100%; height:auto;}
6
我们可以使用object-fit来简化答案：
.kalim img {max-width: 800px; max-height: 800px; object-fit: contain;}

或者

.kalim img {max-width: 800px; max-height: 800px; object-fit: cover;}

参考文献：https://www.w3schools.com/css/css3_object-fit.asp

本文介绍了一种名为“object-fit”的CSS3属性，该属性可以帮助Web开发人员在不改变图像原始比例的情况下调整图像大小和位置。使用object-fit属性可以使图像适应其容器并且无需更改HTML或CSS代码。

1

像Bootstrap类CSS的img-responsive或img-fluid bs4一样

<img src="chicago.jpg" style="max-width: 100%; height: auto; width: 800px"/>
1
但我也需要保持max-width:800px - 这个解决方案没有考虑到这一点。 - JoaMika
0
在Bootstrap 4中，您可以添加类并设置宽度和高度属性。
<img class="img-fluid" src="https://source.unsplash.com/random/1600x1600" width="800" height="800">

正如您所看到的，图像的尺寸为1600x1600，但在网页中它不会超过800x800的尺寸。此外，这是响应式的。

<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<img class="img-fluid" src="https://source.unsplash.com/random/1600x1600" width="800" height="800" alt="Image from unsplash">

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接