内层图片元素高度自适应,外层盒子高度如何保持跟图片高度一致?
在开发的过程中,外层盒子高度不确定的情况下,想要跟内层图片高度保持一致,内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本身到高度超出去一部分呢?
外层box如何可以跟内层不确定高度的图片高度保持一致呢?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>height auto</title> <style> .container { width: 100%; height: auto; background-color: aquamarine; } img { width: 300px; height: auto; /* 主要通过这一行来实现 */ vertical-align: bottom; } </style> </head> <body> <div class="container"> <img src="./猫咪咪.jpg" alt="" /> </div> </body> </html>