Html 如何在移动设备上集中图像，同时在桌面上集中图像？

我正在制作欢迎页

我有这张图片，它看起来是以桌面为中心的

桌面视图：

然而，移动视图是可怕的：

移动视图：

所以。。我们可以看到图像没有正确居中。现在，我可以用黑客来解决这个问题，但是黑客只是剥夺了我学习正确方法的机会

如何在手机和桌面上居中显示图像

我的代码：（profits.png需要居中）

欢迎来到示例
跟进


键入您的用户名
玩




为什么是我们？
即将提交






@字体{
字体系列：“Helvetica Neue”；
src:url（'font/HelveticaNeue.ttf'）；
src:url（'font/Helvetica Neu Bold.ttf'）；
src:url（'font/HelveticaNeue BlackCond.ttf'）；
src:url（'font/HelveticaNeue Light.ttf'）；
src:url（'font/HelveticaNeue Medium.ttf'）；
src:url（'font/HelveticaNeue-Thin.ttf'）；
src:url（'font/HelveticaNeueBd.ttf'）；
src:url（'font/HelveticaNeueHv.ttf'）；
src:url（'font/HelveticaNeueIt.ttf'）；
src:url（'font/HelveticaNeueLt.ttf'）；
src:url（'font/HelveticaNeueMed.ttf'）；
}
#格式{
文本对齐：居中；
颜色：白色；
字体系列：“Helvetica Neue”
}
img{
显示：块；
保证金：0自动；
}
按钮[id=播放按钮]{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
边界半径：5px；
高度：40px；
}
按钮：悬停{
背景色：暗绿色；
}
输入：焦点{
大纲：无；
}

您需要使用

data-at2x

使图像在网站中具有响应性

示例

<img src="img/logo 1.jpg" data-at2x="img/logo 2.jpg" alt>. 

。

---

还可以根据移动屏幕更改图像大小、高度和宽度。

您需要使用

data-at2x

使图像在网站中具有响应性

示例

<img src="img/logo 1.jpg" data-at2x="img/logo 2.jpg" alt>. 

。

---

还可以根据移动屏幕更改图像大小、高度和宽度。

问题是您的

img

中有一个固定的

width

。。这就是为什么你的

页边距：0自动工作不正常。。尝试将其更改为百分比。或者使用
媒体查询
并根据手机大小设置宽度

看看..
问题是您的
img
中有一个固定的
宽度。。这就是为什么你的
页边距：0自动工作不正常。。尝试将其更改为百分比。或者使用
媒体查询
并根据手机大小设置宽度

看..
我假设your profits.png左右两侧都有空白？你必须把它剪掉。@Shadowfend嗯，是的，我认为你是对的。@fastquak看。@Shadowfend是的。成功了。谢谢。@fastquak欢迎兄弟。我假设你的利润。png的左右两边都是空白？你必须把它剪掉。@Shadowfend嗯，是的，我认为你是对的。@fastquak看。@Shadowfend是的。成功了。谢谢。@fastquak欢迎兄弟。