Html 如何在给定的框架中安装img_Html_Css

Html 如何在给定的框架中安装img

html css

Html 如何在给定的框架中安装img,html,css,Html,Css,我在CSS中使用了两个断点一款适用于iPhone手机，不应看到任何图像，只能看到简历内容。-工作很好。其次，对于图像与简历内容左侧对齐的台式机。这就是我面临的问题，左边的图像不是100%。只显示了它的一部分。图像和内容应相邻放置。此外，请让我知道，如果有任何其他方式以外的分裂的s。由于该图像位于我的本地系统上，我在下面添加了我的网页的屏幕截图：下面是我的代码： @媒体屏幕和最大宽度：600px{ h1.隐藏{ 显示：无； } .集装箱{ 左边距：10%；利润率最高：5%；保证金权

我在CSS中使用了两个断点

一款适用于iPhone手机，不应看到任何图像，只能看到简历内容。-工作很好。其次，对于图像与简历内容左侧对齐的台式机。这就是我面临的问题，左边的图像不是100%。只显示了它的一部分。图像和内容应相邻放置。此外，请让我知道，如果有任何其他方式以外的分裂的s。由于该图像位于我的本地系统上，我在下面添加了我的网页的屏幕截图：

下面是我的代码：

@媒体屏幕和最大宽度：600px{ h1.隐藏{ 显示：无； } .集装箱{ 左边距：10%；利润率最高：5%；保证金权利：10%； } .标签{ 文本对齐：左对齐；文本转换：大写；字体：斜体；字号：600；颜色：rgb43、93、240； } 梅因先生{ 文本对齐：左对齐； } } @媒体屏幕和最小宽度：601px { html{ 框大小：边框框 } *, *：：之后， *：：之前{ 框大小：继承 } h1、h2、h3、h4、h5、h6{ 边际上限：0； } p{ 边缘：0.01米； } .集装箱{ 宽度：1920像素；保证金：0自动； } .图片，.简历{ 位置：固定；宽度：960px；填充物：3.125rem；文本对齐：左对齐； } .图片{ 排名：0；左：0； } .介绍{ 宽度：75%；利润率：55%自动0；字体系列：蒙特塞拉特，无衬线；字体大小：10px；线高：1.35；字号：500；颜色：fff；文本对齐：居中； } .背景{ 文本对齐：左对齐；位置：绝对位置；排名：0；左：0； z指数：-1；宽度：100%；高度：100vh；背景：线性梯度rgba0,0,0,0.4，rgba0,0,0,0.4，url../img/profile.jpg；背景尺寸：封面；背景位置：左；滤光片：亮度90%； } .介绍{ 颜色：3ee6bf；字体风格：普通；位置：相对位置；字号：700； } .简历{ 排名：0；右：0；底部：0；背景色：fff；字体系列：Hind，无衬线；字体大小：0.9375rem；字体大小：300；线高：1.818；溢出y：滚动； } .部分{ 宽度：100%；边缘顶端：3em；明确：两者皆有；溢出：隐藏； } .第部分：第一个孩子{ 边际上限：0； } .侧边栏，.main{ 浮动：左； } .侧边栏{ 宽度：10%； } 梅因先生{ 宽度：90%；右：25%； } .标签{ 文本转换：大写；字体：斜体；字号：600；颜色：rgb43、93、240； } } 移动体验你好，我是珍娜！我制作网站。詹娜·加西亚你好我是珍娜。一位来自纽约市的网络开发者，目前在硅谷一家名为Fomotograph的初创公司工作。

我使用HTML5、CSS3、Sass和JavaScript创建网站。我还使用RubyonRails和Django创建了完整的web应用程序。

项目猫收藏家一个web应用程序，向您随机显示一张猫的照片，并允许您将照片添加到猫的相册中。

欺骗我把你的普通照片变成艺术品。想看起来像蒙娜丽莎吗？欺骗我！

工作摄影仪 2015年9月至今加利福尼亚州硅谷网络开发者

自基序 2012年12月-2015年9月英国伦敦网络开发者

Jenna的Web开发顾问 2011年8月至2012年12月纽约，纽约网络开发者

我认为这里的问题是，你表达的意图存在冲突，因此很难知道如何提供帮助

一方面，你希望图像占据整个屏幕的高度。这将与您使用的高度一起显示：100vh；。另一方面，您不希望图像被掩盖，而是希望看到整个图像。要将图像视为一个整体并以100vh保持其完整高度，您必须将其水平挤压，不是吗

我的建议是决定当屏幕变小时，图像是否应该被覆盖，或者你是否准备在其上降低一些高度以保持其自然的纵横比。你最不想做的就是把它压扁

如果您准备降低一些高度，我建议拆分图像和文本，并为它们指定百分比宽度。

我建议您更改html类背景和容器的位置，因此，在css中，确定每个类相对于body向左或向右的位置百分比，并从.background类中删除适当的高度。我是初学者，但我希望能帮助你，如果没有请告诉我

<body>
  <div class="container">
    <section class="picture">
      <div class="intro">
        <h1 class="hidden">Hello, I'm Jenna!</h1>
        <h1 class="hidden">I make <em>websites</em>.</h1>
      </div>
      <div class="background">
      </div>...
</body>

借

<body>
  <div class="background">
  </div>
  <div class="container">
    <section class="picture">
      <div class="intro">
        <h1 class="hidden">Hello, I'm Jenna!</h1>
        <h1 class="hidden">I make <em>websites</em>.</h1>
      </div>...
  </div> 
</body>