如何在给定的帧中拟合图像

问题描述 投票：0回答：2

我在CSS中使用了两个断点。

  • 一个用于没有图像的Iphone只能看到简历内容。 - 工作正常。
  • 其次，对于桌面，其中图像与简历内容的左侧对齐。这是我遇到问题的地方左边的图像不是100％。只展示了其中的一部分。图像和内容应彼此相邻放置。

另外，如果除了拆分<section>s之外还有其他任何方式，请告诉我。由于图像在我的本地系统上，我在下面添加了我的网页的屏幕截图：

ResumeWebpage

以下是我的代码：

@media screen and (max-width: 600px){
h1.hidden{
  display: none;
}
.container{
  margin-left: 10%;
  margin-top: 5%;
  margin-right: 10%;
}
.tag {
  text-align: left;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 600;
  color: rgb(43, 93, 240);

}

.main{
  text-align: left;

}

}

@media screen and (min-width: 601px)
{
html {
    box-sizing: border-box
}
*,
*::after,
*::before {
    box-sizing: inherit
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}
p {
  margin: 0 0 1em;
}
.container {
  width: 1920px;
  margin: 0 auto;
}
.picture, .resume {
  position: fixed;
  width: 960px;
  padding: 3.125rem;
  text-align: left;
}
.picture {
  top: 0;
  left: 0;
}
.intro {
  width: 75%;
  margin: 55% auto 0;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.background {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/profile.jpg");
  background-size:cover;
  background-position:left;
  filter: brightness(90%);
}
.intro em {
  color: #3ee6bf;
  font-style: normal;
  position: relative;
  font-weight: 700;
}
.resume {
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  font-family: Hind, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.818;
  overflow-y: scroll;
}
.part {
  width: 100%;
  margin-top: 3em;
  clear: both;
  overflow: hidden;
}
.part:first-child {
  margin-top: 0;
}
.sidebar, .main {
  float: left;
}
.sidebar {
  width: 10%;
}
.main {
  width: 90%;
  padding-right: 25%;
}
.tag {
  text-transform: uppercase;
  font-style: italic;
  font-weight: 600;
  color: rgb(43, 93, 240);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>The Mobile Experience</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700|Hind:400,600,300" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- current design is from http://rafaelderolez.be/, would need to be replaced if lab approved -->
</head>
<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>
    </section>
    <section class="resume">
      <section class="part">
        <div class="sidebar">
          <span class="tag">Jenna Garcia</span>
        </div>
        <div class="main">
          <p>
            Hello! I'm  Jenna. A web developer from New York City, currently working at a Silicon Valley startup called, Fomotograph.
          </p>
          <p>
            I create websites using HTML5, CSS3, Sass, and JavaScript. I also create full web applications using Ruby on Rails and Django.
          </p>
        </div>
      </section>
      <section class="part">
        <div class="sidebar">
          <span class="tag">Projects</span>
        </div>
        <div class="main">
          <h4>Collector of Cats</h4>
          <p>
            A web application that shows you a random photo of a cat, and allows you to add the photo to your album of cat photos.
          </p>
          <h4>Artify Me</h4>
          <p>
            Turn a regular photo of you into a work of art. Want to look like the Mona Lisa? Artify Me!
          </p>
        </div>
      </section>
      <section class="part">
        <div class="sidebar">
          <span class="tag">Work</span>
        </div>
        <div class="main">
          <div>
            <h4>Fomotograph</h4>
            <div class="date-range">September 2015 - Present</div>
            <p>Silicon Valley, California<br />
            Web Developer</p>
          </div>
          <div>
            <h4>Automotify</h4>
            <div class="date-range">December 2012 - September 2015</div>
            <p>London, England<br />
            Web Developer</p>
          </div>
          <div>
            <h4>Jenna's Web Development Consultancy</h4>
            <div class="date-range">August 2011 - December 2012</div>
            <p>New York, New York<br />
            Web Developer</p>
          </div>
        </div>
      </section>
    </section>
  </div>
</body>
</html>
html css
2个回答
1
投票

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

一方面，您希望图像占据屏幕的整个高度。这与您使用height: 100vh;一起显示。另一方面，您不希望图像被遮盖，并且您希望将图像视为一个整体。要看到整个图像并保持100vh的全高，你必须横向压扁它，不是吗？

我的建议是决定当屏幕变小时图像应该被覆盖，或者你是否准备在它上面丢失一些高度以保持其自然纵横比。你想要的最后一件事就是让它被压扁。

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

0
投票

我建议你改变你的html中的类背景和容器的位置，所以在css中确定每个类从左侧或右侧的位置百分比，并从.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.