Css 快速响应的图像和文本转换

如何在iphone和台式机上制作出100%宽度和100%高度的响应图像。我是说像这样- 如果它从任意一侧牺牲了一点图像，这是可以的，但它应该保持纵横比，并且应该适合整个屏幕 我试过做这件事，但没有成功

我注意到顶部图像上的过渡和文字。我们如何做到这一点

这是到目前为止我的代码

HTML

---

但这里的问题是，图像不适合屏幕的高度和宽度。我如何实现前面提到的100%宽度和高度，就像我给出的链接一样

使用背景图像并设置以下css，而不是使用图像来实现此目的：

#body{
  background-image:url(yourimgurl);
  background-position:50% 50%;
  background-size:cover;
}

它会使你的图像覆盖整个容器，当它变小时，会从侧面修剪一点

您需要执行以下操作：

将高度、宽度100%设置为

将高度、宽度100%设置为

。图像

添加您的背景图像

添加背景尺寸：100%（背景尺寸100%将覆盖整个空间）

钢笔：

---

要点：

很遗憾，欢迎来到这里，询问代码的问题必须表明对正在解决的问题的最低理解。包括尝试过的解决方案、它们不起作用的原因以及预期结果。另请参见：堆栈溢出问题检查表。确定。。等待让我在那里提供我的代码，现在我已经提供了我的代码，我是新来的，所以我什么都不知道。谢谢，玛尼，我试过了，但背景图像没有出现。我只是一个HTML和CSS的初学者，这是我第一个真正的网站。这是我现在的代码HTML CSS#body{bacgkround image:url（'image.jpg'）；背景位置：50%50%；背景大小：cover；}@user3219918您还需要设置#body的宽度和高度。它仍然不起作用#正文{bacgkround image:url（'image.jpg'）；背景位置：50%50%；背景大小：封面；高度：700px；宽度：1000px；}背景在上面的代码示例和您的回答中拼写错误。@TomMaton为抓到输入错误而欢呼^^

.image {
    position: absolute;
    top: 0;
    left: 0;
    max - width: 100 % ;
    max - height: 100 % ;
    width: auto;
}

#body{
  background-image:url(yourimgurl);
  background-position:50% 50%;
  background-size:cover;
}