CSS怎样不让图片高度超出屏幕
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS怎样不让图片高度超出屏幕相关的知识，希望对你有一定的参考价值。
CSS在保持宽高比例情况下，按比例自动缩小或放大到屏幕最大高度或最大宽度，不允许超出高度或宽度，本人很菜，之前写了两个代码，在手机上图片有一部分都跑到第二页了。麻烦大神写个详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<style type="text/css">
.boxwidth: 96%;margin: 0 auto;
.imgwidth: 100px;height: 150px;
.img imgwidth: 100%;height: 150px;
</style>
</head>
<body>
<div class="box">
<div class="img">
<img src="img/5b4ff91b7ce8e.jpg"/>
</div>
</div>
</body>
</html>
效果图：
如果你想图片比例不变的话.img imgwidth: 100%;height: 150px;里面的height：150px;换成height：auto;
追问大佬，用了这个代码之后图片显示的比较小，也不会放大。用了自动也一样，请问怎么办
追答你想怎么缩小放大？我这个图片比较小是因为 .imgwidth:100px; 它宽度为100像素
追问.boxwidth: 96%;margin: 0 auto;
.imgwidth: 100px;height: 150px;
.img imgwidth: 100%;height: 150px;
这三个能不能只用一个 括号写在样式里？
三个类分别控制三个容器，如果在一个下面效果就不一样了
追问谢谢
追答不客气！
参考技术A 怎样不让图片占有整个屏幕css代码 背景超出长度屏幕 跟随滚动到图片展示完就不动了
求问这个效果是怎么做的？
比如一般屏幕都是1920*1080，我的图片是1920*2080,我如何随着屏幕的滚动展示完整个2080的内容，当背景图片的内容展示完之后，背景固定不动。
简单理解就是，当图片没有展示完的时候，背景随着下翻而滚动；当展示完之后，背景固定不动。
多谢各位大神。
以上是关于CSS怎样不让图片高度超出屏幕的主要内容，如果未能解决你的问题，请参考以下文章
css, 怎样使td高度固定，当内容超出设定高度时，超出部分隐藏。
CSS/JS 图片高度固定宽度按比例显示 （纯CSS方法和CSS+JS方法）