nat_pagle 2022-05-18 22:21 采纳率: 66.7%
浏览 52
已结题

html如何使得背景图片能够按浏览器窗口大小比例显示

html如何使得背景图片能够按浏览器窗口大小比例显示，而不会出现拉伸图片的情况，例如

img

img

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2022-05-18 22:37
    关注

    设置
    background-size: cover;
    或者
    background-size: contain;
    cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    img

    img

    你题目的解答代码如下：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>
    .p1 {
        width: 600px;
        height: 300px;
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-28%2F5f99180e8dd5a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655476992&t=b8c489e8bf0035b98c4842af7fc555c6) no-repeat center center;
        background-size: cover;
        border: 5px solid #999;
    }
    .p2 {
        width: 300px;
        height: 400px;
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-28%2F5f99180e8dd5a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655476992&t=b8c489e8bf0035b98c4842af7fc555c6) no-repeat center center;
        background-size: cover;
        border: 5px solid #999;
    }
    .p3 {
        width: 600px;
        height: 300px;
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-28%2F5f99180e8dd5a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655476992&t=b8c489e8bf0035b98c4842af7fc555c6) no-repeat center center;
         background-size: contain;
        border: 5px solid #999;
    }
    .p4 {
        width: 300px;
        height: 400px;
        background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-28%2F5f99180e8dd5a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655476992&t=b8c489e8bf0035b98c4842af7fc555c6) no-repeat center center;
         background-size: contain;
        border: 5px solid #999;
    }
</style>
</head>
<body>
    
    cover：容器高度不够.将背景图像等比缩放到完全覆盖容器，背景图像上下可能超出容器。
    <div class="p1"></div>
    cover：容器宽度不够.将背景图像等比缩放到完全覆盖容器，背景图像左右可能超出容器。
    <div class="p2"></div>
    contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
    <div class="p3"></div>
    <div class="p4"></div>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月29日
  • 已采纳回答 5月21日
  • 创建了问题 5月18日

悬赏问题

  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题