Разве figcaption не считается пространством внутри фигуры? - PullRequest
Новая
       17

Разве figcaption не считается пространством внутри фигуры?

0 голосов
/ 16 июня 2019

TL; DR: Да, я " пропустил что-то очевидное ".Извините за это.

Помещение изображения внутри фигуры работает нормально, все границы хорошо вписываются:

No figcaption

Но когда ядобавьте figcaption, размер изображения останется прежним и переполнит фигуру:

With figcaption

Это похоже на "height: 100%" для изображениязанимает 100% фигуры, игнорируя figcaption .

Я получаю одинаковое поведение как в Firefox, так и в Chrome.

Игнорируем любые горизонтальные проблемы;Я удалил этот код.

Это действительно так, как он должен себя вести, или я упускаю что-то очевидное? 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: 30em; width: 45%; }
                figure>img { width: auto; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 16 июня 2019

Это из-за ваших CSS единиц.em равно текущему размеру шрифта.Это масштабируемая единица, но не то, что вы хотите.Ваш родитель должен иметь возможность масштабировать столько, сколько он хочет в соответствии с содержанием внутри него для отзывчивости.См. Здесь 

figure { height: 30em; width: 45%; }

Ваша метка фигуры имеет ширину, будь она любой, что вы делаете неправильно, вы как бы запечатываете метку.Вы допускаете ширину 45%, но ограничивает высоту.И тогда вы делаете это неправильно. 

figure>img { width: auto; height: 100%; border-color: red; }

Делая изображение масштабируемым до полной высоты.Вот почему из-за ограниченности родительского элемента div и этого изображения height:100% вы видите, что изображение выходит или оно выходит за пределы фигуры.Вы должны позволить родительскому элементу масштабироваться независимо и определять ширину дочерних элементов, которые изменяют внешний вид.

Все, что говорится, принимая все во внимание, вы получите это

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                 * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: auto; width: 45%; }
                figure>img { width: 100%; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>
1 голос
/ 16 июня 2019

« Это как« высота: 100% »для изображения занимает 100% фигуры, игнорируя figcaption. »

Да, именно так.

Ваш figcaption занимает место, если вы не удалите его из потока, используя position:absolute. Вы определили высоту вашего figure и сказали своему img взять 100% этой высоты, так и есть. Это вовсе не «игнорирование» figcaption. Вы сказали, что он имеет высоту, равную 100%, если это родитель. Как ваш img может занять 100% высоты figure и все еще содержаться внутри, если вы добавляете в свой figure еще один элемент, который также будет занимать процент от высоты?

Игнорируя ваши проблемы с шириной в соответствии с запросом и предполагая, что вам нужно задать для figure определенную высоту, определите ваши высоты следующим образом: 

* { box-sizing: border-box; border-style: solid; padding: .1em; }
figure { height: 30em; width: 45%; }
figure>img { width: auto; height: 95%; border-color: red; }
figcaption {height:5%;}
...