【发布时间】：2020-10-15 08:06:02
【问题描述】：
如果我的 html 和 css 不好，请原谅我这是我一个人做的第一页。我已经在这个问题上工作了至少 3 个小时，我的索引页面完整看起来还不错，但是当我将它提交到 github 并在我儿子的 iphone 上查看时，图像看起来被挤压并且纵横比关闭。如果我能得到任何帮助，请提前感谢！
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/stylesheet.css" />
<title>RealtorsRUs</title>
</head>
<body>
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
<a href="index.html">MReality</a>
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a></li>
<li>
<a href="about.html">About Us</a></li>
<li>
<a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero
excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil
deserunt explicabo!
</p>
<a href="about.html" class="btn">Read More</a>
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img
src="images/evelyn-paris-XJnP4L958ds-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item2">
<img
src="images/jesse-roberts-561igiTyvSk-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item3">
<img
src="images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg"
alt="Home"
/>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
</body>
</html>
enter code here
css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: .95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div{
margin: 5px;
display: flex;
}
.flex-row h3{
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
img {
max-width: 100%;
}
.logo{
font-size: 1.5rem;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("../images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center
center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("../images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("../images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter p{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
@media(max-width: 768px) {
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-row{
flex-wrap: wrap;
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img{
flex: 1;
}
.flex-row .item1 .item2 .item3{
【问题讨论】：
-
嗨，Alex，欢迎来到 SO！哪些图像？您使用 6:3 作为背景，使用 3 作为元素。他们都在手机上搞砸了吗？此外，您发布的 CSS @media 不完整（对于移动问题相当重要），并且您的 HTML 缺少关闭
</div>（可能关闭<div class="flex-row">）。此外，您的图片在此处无法访问，因此请让它们可以访问或说明我们可以为“placeholder.com”（或类似网站）填写的一些尺寸。 -
谢谢@RenevanderLende 我错过了我忘记验证器的div并修复了它。我不知道是否允许发布链接，但这里是完整的网站amolina0116.github.io/MyProjects/realtorsite 查看照片。在 safari 中，只有 3 in 功能会被垂直挤压和拉伸。第一个是最糟糕的，其他两个不那么明显