Html Safari不显示图像，但Chrome可以工作_Html_Css_Flexbox_Media Queries

Html Safari不显示图像，但Chrome可以工作

html css

Html Safari不显示图像，但Chrome可以工作,html,css,flexbox,media-queries,Html,Css,Flexbox,Media Queries,我不确定为什么在使用Safari打开文件时图像不显示，但在Chrome中显示图像没有问题我也有一个问题的标志。我似乎无法将其与页面的其余部分正确放置。我不确定它的填充或边距是否需要调整，但当它坐着的时候，标志没有坐好 <!DOCTYPE html> <html> <meta name="description" content="David Menard Front-End Ninja resume" /> <meta name="author" co

我不确定为什么在使用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>
    &nbsp;
    &nbsp;

    <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>

你问了一个错误的问题，你没有使用像（jpg，png等）这样的图像，你正在使用webp

根据caniuse.com的说法，并非所有浏览器都支持webp，请参见

它只支持使用chrome、opera（新）、android浏览器等chrome引擎的浏览器

另请参阅，以便更好地理解您提出的错误问题，您没有使用图像，例如（jpg、png等），您正在使用webp

根据caniuse.com的说法，并非所有浏览器都支持webp，请参见

它只支持使用chrome、opera（新）、android浏览器等chrome引擎的浏览器

请参阅以获得更好的理解

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%;
}