CSS实现图片等比例缩小不变形的实例分析
程序员文章站
2022-03-25 09:24:44
...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS实现图片等比例缩小不变形</title> <link rel="stylesheet" type="text/css" href="../css/reset.css" /> </head> <style type="text/css"> .wrap { width: 90%; height: 550px; border: 1px solid #000; margin: 50px auto; } ul { width: 100%; height: 100%; } ul li { overflow: hidden; float: left; width: 350px; height: 350px; border: 1px solid #aaa; margin: 90px 0 0 43px; } ul li img { /*等宽缩小不变形*/ /*width: 100%;*/ /*二选一*/ /*等高缩小不变形*/ height: 100%; } </style> <body> <p class="wrap"> <ul> <li> <img src="../images/bg1.jpg" alt="" /> </li> <li> <img src="../images/bg2.jpg" alt="" /> </li> <li> <img src="../images/bg3.jpg" alt="" /> </li> </ul> </p> </body> </html>
以上就是CSS实现图片等比例缩小不变形的实例分析的详细内容,更多请关注其它相关文章!