Почему мое (json) изображение go вне границы / контейнера, даже если max-width установлено на 100%? - PullRequest
Новая
       1

Почему мое (json) изображение go вне границы / контейнера, даже если max-width установлено на 100%?

0 голосов
/ 05 февраля 2020

Я использую вызов API для получения информации об изображении. Изображение, которое я возвращаю и хочу показать его, приходит в виде <figure> json данных. Данные API json имеют заданную ширину, которую, как я заметил, я могу изменить в CSS, когда задаю для нее заданную ширину c. Но что, если я хочу, чтобы он рос или уменьшался с контейнером? Я должен быть в состоянии установить max-width на 100%, но все изображения go вне контейнера в мобильном размере. Кроме того, они не увеличиваются при увеличении размера экрана, они остаются на одном и том же размере.

JSON Возвращенные данные: 

<figure data-align="right" data-img-src="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827" data-size="small" data-ratio="1.3333333333333" data-width="375" data-embed-type="image" style="width: 375px"><a class="fluid-height" style="padding-bottom:133.3%" href="https://static.giantbomb.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" data-ref-id="1300-1349827"><img alt=" Original Arcade Cabinet" src="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg" srcset="https://giantbomb1.cbsistatic.com/uploads/original/0/8338/1349827-popeye_cabinet.jpg 375w" sizes="(max-width: 480px) 100vw, 480px" data-width="480"></a><figcaption> Original Arcade Cabinet</figcaption></figure>

My CSS: 

figure {
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    padding: 10px;
    text-align: center;
}

figure img{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 10px;
}

Мой HTML: 

<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Classic Arcade Game Info</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Raleway|Amatic+SC&display=swap" rel="stylesheet">
    </head>
    <body>

        <header class="header">

            <a name="top"></a>

            <div class="title">
                <img src=images/jacob.jpg class="jacobLogo" alt="cartoon Jacob head">
                <h1> Classic Arcade Game Info</h1>
            </div>

            <div class="headInfo">
                <p>Search for you favorite Arcade Game below to recieve information about the game and videos!</p>
            </div>

            <form>
                <div class="searchSection">
                    <input class="searchBox" type="text" placeholder="e.g. Donkey Kong" required>
                </div> 
                <div class="buttonSection">
                    <input class="submitButton" type="submit" value="Search">
                </div>  
            </form>

        </header>

        <main class="main">

            <div class="arrow hidden">
                <a href="#top"><img class="arrowImage" src="images/boxArrow.jpg"><a href="#top"></a>
            </div>

            <div class="loading">
                <section class="loadingMessage"></section>
            </div>

            <div class="errors">
                <section class="errorMessage"></section>
            </div>

            <div class="infoContainer hidden">
                <section class="infoResults hidden info"></section>
            </div>

            <div class="tubeContainer hidden">
                <section class="tubeResults hidden tube">
                    <input class="youTubeLogo" type="image" src="images/youtube.png" alt="YouTube Logo">
                    <section class="tubeList"></section>
                </section> 
            </div>

        </main>

        <footer class="footer">

            <p>Another fun site created by Jacob Ashley</p>

        </footer>

        <script src="script.js" async defer></script>

    </body>
</html>

enter image description here

1 Ответ

1 голос
/ 05 февраля 2020

Предоставленное HTML не соответствует изображению, которым вы поделились. Я уверен, что это происходит из-за того, что из вашего скрипта происходит вызов. js, и один из этих элементов div заменяется тегом json figure.

Однако предоставленный вами код фигуры, возвращаемый из API имеет ширину, объявленную в теге стиля, чтобы переопределить это в вашем внешнем интерфейсе, который вам нужно будет использовать! возвращенное изображение.

...