Мобильная версияЯ создал гибкую строку фиксированной ширины с двумя элементами:
гибкий столбец из двух элементов: изображение, его ширина и длина указаны в теге html и абзаце, а абзац большего размера занимает 40 % ширины, например:
Пример
Проблема в том, что если изображение не загружается, его заполнитель будет переполнение. Мне кажется, это не то, что должно происходить. Я ожидал, что заполнитель разбитого изображения будет иметь точно такие же размеры, как если бы он не был сломан. Что происходит и как это сделать?
Я добавил встроенные значения ширины и высоты, чтобы избежать смещения макета при загрузке. Я знаю, что их удаление решает проблему. Есть ли способ избежать переполнения и вообще избежать ошибок в макете?
Вот JSfiddle проблемы: https://jsfiddle.net/ory40tmf/2/
Image!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus.
.container{
display:flex;
width:600px;
align-items:center;
}
.column{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
img{
height:auto;
min-width:0;
min-height:0;
max-width:100%;
flex: 1 1 auto;
}
p{
flex: 1 0 60%;
}
Вот тот же JSfiddle с битым изображением (тот же CSS): https://jsfiddle.net/ory40tmf/3/
Image!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut neque hendrerit, tempor neque ac, sollicitudin odio. Nulla pharetra orci mollis, scelerisque arcu ac, convallis dui. Vivamus augue lectus, semper sed eleifend sed, dignissim nec augue. In hac habitasse platea dictumst. Nam gravida nisl ligula, et faucibus felis imperdiet sed. Vestibulum eget orci tristique, molestie lectus id, varius lectus.
Подробнее здесь: https://stackoverflow.com/questions/792 ... ls-to-load
