前端图片居中怎么设置（web前端，一张图片的实际尺寸为1334×662，屏幕分辨率比这张图片还高，前端如何设计铺满整个屏幕的）

本文目录

• web前端，一张图片的实际尺寸为1334×662，屏幕分辨率比这张图片还高，前端如何设计铺满整个屏幕的
• 面试前端开发的面试题，就是在不知道父元素宽高的情况下，如何让一个图片垂直和水平都居中
• 前端怎么改变盒子中图片位置

web前端，一张图片的实际尺寸为1334×662，屏幕分辨率比这张图片还高，前端如何设计铺满整个屏幕的

一般是这样的，假设屏幕和图片宽度比 大于高度比 应该设置图片高度为屏幕高度，然后宽度等比拉伸并且居中；假设屏幕和图片宽度比 小于高度比 应该设置图片宽度为屏幕宽度，然后高度等比拉伸并且居中；

面试前端开发的面试题，就是在不知道父元素宽高的情况下，如何让一个图片垂直和水平都居中

如果知道图片宽高，可以将图片设置为绝对定位，父级相对定位

假定图片宽高为100x200

div{position:relative;}div img{position:absolute;display:block;top:50%;left:50%;margin-top:-100px;margin-left:-50px;}

前端怎么改变盒子中图片位置

1、首先打开前端开发工具，新建一个html代码页面，在html代码页面上创建一个用于设置背景颜色的div标签，给这个标签添加上class=bg-img。2、其次设置背景图片，创建style标签，在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。3、最后回到html代码页面，在bg-img类里添加background-position：center的属性，保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。