我不确定为什么在使用Safari打开文件时不显示图像，但在Chrome中显示图像没有问题。
我也遇到了徽标问题。我似乎无法正确地将其与页面的其余部分放在一起。我不确定它的填充或边距是否需要调整但是当它坐着时，徽标不是正确的
<!DOCTYPE html>
<html>
<meta name="description" content="David Menard Front-End Ninja resume" />
<meta name="author" content="//David Menard">
<meta name="viewport" content="width=device-width, minimun-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="Udacity Portfolio course project">
<meta id="theme-color" name="theme-color" content="#307699">
<meta name="udacity-grader" content="http://udacity.github.io/responsive-images/project/project-grader.json" unit-tests="http://udacity.github.io/responsive-images/project/project-grader.js">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Assistant|Cambay|Didact+Gothic" rel="stylesheet">
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<style>
@media screen and (min-width: 155px) and (max-width: 415px) {
h1 {
font-size: 4em;
text-align: center;
}
h2 {
font-size: 2em;
text-align: center;
}
h3 {
font-size: 2em;
text-align: center;
}
h4 {
font-size: 3em;
text-align: center;
}
h5 {
font-size: 1.5em;
text-align: center;
max-width: 100%;
}
body {
max-width: 100%;
}
.container {
width: 100%;
}
.featured_title {
max-width: 100%;
}
.col-4 {
display: block;
flex-wrap: wrap;
width: 100%;
}
.featured {
width: 100%;
}
.logo {
width: 100%;
align-self: center;
}
.content {
width: 100%;
}
.icon {
width: 50%;
padding-left: 6.5em;
margin-top: 10em;
}
.col-4 {
width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 659px) {
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
}
.content {
display: flex;
flex-wrap: wrap;
}
.col-4 {
display: inline-flex;
flex-wrap: wrap;
width: 50%;
}
.logo {
width: 10%;
}
.logo_text {
width: 90%;
}
.icon {
width: 100%;
padding-left: 60px;
justify-content: space-around;
}
h1 {
font-size: 2em;
text-align: right;
}
h2 {
font-size: 1em;
text-align: center;
}
h3 {
font-size: 1em;
text-align: right;
}
h4 {
font-size: 1.5em;
text-align: center;
}
h5 {
text-align: center;
}
.featured {
width: 100%;
display: all;
}
.wrapper {
width: 100%;
}
}
@media screen and (min-width: 660px) {
.wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
}
.content {
display: flex;
flex-wrap: wrap;
}
.col-4 {
display: flex;
flex-wrap: wrap;
width: 33%;
}
.logo {
width: 50%;
}
.logo_text {
width: 50%;
}
.icon {
width: 15%;
margin-left: 70px;
}
h1 {
font-size: 2em;
text-align: right;
}
h2 {
font-size: 1em;
text-align: center;
}
h3 {
font-size: 1em;
text-align: right;
}
h4 {
font-size: 1.5em;
text-align: center;
}
h5 {
text-align: center;
}
.featured {
width: 100%;
display: all;
}
.wrapper {
width: 100%;
}
}
@media screen and (min-width: 888px) {
body {
max-width: 888px;
margin-left: auto;
margin-right: auto;
}
.slideshow {
width: 100%;
}
}
</style>
<body>
<div class="container">
<div class="content">
<div class="logo">
<img class="icon" src="img/icon.webp" srcset="img/icon.webp 2x, img/icon.jpg 1x" alt="udacity logo">
</div>
<div class="logo_text">
<h1>JANE DOETTE</h1>
<h3>FRONT-END NINJA</h3>
</div>
<div class="bar">
</div>
<div class="banner">
<picture>
<source srcset="img/slideshow_948w.jpg">
<img class="slideshow" src="img/slideshow_948w.jpg" srcset="img/slideshow_948w.jpg 2x, img/slideshow_512.jpg 1x" alt="Picture of html script">
</picture>
</div>
<div class="featured_work">
<h4 class="homepage">Featured Work</h4>
</div>
<div class="wrapper">
<div class="col-4">
<picture>
<source srcset="img/Appify.jpg">
<img class="featured" src="img/Appify.webp" srcset="img/Appify.webp 2x, img/Appify.jpg 1x" alt="Appify logo">
<div class="featured_title">
<h2>APPIFY</h2>
<h5>https://github.com/udacity/Appify/</h5>
</div>
</picture>
</div>
<div class="col-4">
<picture>
<source srcset="img/sunflower.jpg">
<img class="featured" src="img/sunflower.webp" srcset="img/sunflower.webp 2x, img/sunflower.jpg 1x" alt="Picture of sunflower">
<div class="featured_title">
<h2>SUNFLOWER</h2>
<h5>https://github.com/udacity/Sunflower/</h5>
</div>
</picture>
</div>
<div class="col-4">
<picture>
<source srcset="img/Bokeh.jpg">
<img class="featured" src="img/Bokeh.webp" srcset="img/Bokeh.webp 2x, img/Bokeh.jpg 1x" alt="light distorsion">
<div class="featured_title">
<h2>BOKEH</h2>
<h5>https://github.com/udacity/BOKEH/</h5>
</div>
</picture>
</div>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
这是CSS文件
body {
font-family: 'Didact Gothic', sans-serif;
font-family: 'Cambay', sans-serif;
font-family: 'Assistant', sans-serif;
}
.container {
display: flex; /* or inline-flex */
flex-direction: row;
justify-content: space-around;
align-items: baseline;
align-content: space-around;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
width: 100%;
}
.wrapper {
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
width: 100%;
}
/* We tell all items to be 100% width */
img, embed, object, video {
max-width: 100%;
}
.bar {
width:100%;
height: 5px;
background-color:#7d97ad;
}
.featured_work {
text-align: center;
justify-content: space-around;
}
.col-4 {
display: flex;
flex-wrap: wrap;
width: 100%;
}
答案 0 :(得分：0)
你问错误的问题你没有使用你正在使用webp的图像（jpg，png等）
并且根据 caniuse.com 所有浏览器都不支持webp，请参阅http://caniuse.com/#feat=webp
它仅受使用chrome引擎的浏览器支持，如chrome，opera（新），android浏览器等