我在我的 CSS 中使用了两个断点。
- 一个用于 Iphone 的，不应看到任何图像 只能看到简历内容。 -- 工作正常。
- 其次，对于图像与简历内容左侧对齐的桌面。这是我面临的问题左侧的图像在这里不是 100%。只展示了一部分。图片和内容应并排放置。
此外，请让我知道除了拆分 <section>s 之外是否还有其他方法.
由于图像在我的本地系统上，我在下面添加了我的网页的屏幕截图:
下面是我的代码:
@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>最佳答案
我认为这里的问题是您表达的意图存在冲突，因此很难知道如何提供帮助。
一方面，您希望图像占据屏幕的整个高度。这会在您使用 height: 100vh; 时显示。另一方面，您不希望图像被遮盖，而是希望看到整个图像。要从整体上查看图像并在 100vh 下保持其完整高度，您必须水平挤压它，不是吗？
我的建议是决定当屏幕变小时是否应该覆盖图像，或者您是否准备好在图像上降低一些高度以保持其自然纵横比。您最不想看到的就是它被压扁。
如果您准备降低一些高度，我建议拆分图像和文本并为它们指定百分比宽度。
关于html - 如何将 img 放入给定的框架中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48974819/