前端如何让照片靠左竖着填充满屏幕

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端如何让照片靠左竖着填充满屏幕相关的知识，希望对你有一定的参考价值。

参考技术A 需要在css中，可以将div的高度和宽度属性设置为100%，同时使用background-size属性设置背景图片为100%，便可以实现背景图片铺满屏幕。
css怎么让图片填满：
1、新建一个html文件，使用div标签创建一个模块，并设置其class属性为myclass。
2、在标签里设置div的样式，使用background属性设置div的背景图片。
层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

如何制作响应式背景照片？

【中文标题】如何制作响应式背景照片？【英文标题】：How to make responsive background photo? 【发布时间】：2022-01-04 19:26:18 【问题描述】：

虽然有电脑大小的屏幕，我可以在背景中看到整只猫，但在手机大小的屏幕上，只有这只猫的一部分。它并不小，但它是正常尺寸和切割的。有什么方法可以让照片响应或在较小的屏幕上更改照片（以其他比例）？

HTML：

    <div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>

【问题讨论】：

【参考方案1】：

试试background-position:center;

<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;height: 100vh;">
    </div>

【讨论】：

【参考方案2】：

补充 Sunil 的好建议，有时在所有设备上使用相同的背景图像很难获得好的结果。尤其是当您考虑到桌面视口通常是横向格式，而移动视口通常是纵向格式时。

如果是这种情况，您可以做的是使用媒体查询在桌面和移动设备上定义不同的背景图像。

这样做的好处是您可以同时使用横向和纵向格式的背景图片。

它的效率也稍高一些，因为您可以为移动设备指定较小的图像，因此速度会更快。

CSS

.bg-image
    background-size:cover;
    background-position:center; 
    background-repeat:no-repeat;


/* use portrait format background image on mobile */
@media(max-width:600px)
 .bg-image
  background-image: url('img/cattery/mobile-photo-cut-protrait.jpg');
 


/* use landscape format background image on tablet and desktop */
@media(min-width:601px)
 .bg-image
  background-image: url('img/cattery/main-photo-cut-landscape.jpg');

HTML