Как мы можем иметь <img> или <canvas>, который растягивается / сжимается, чтобы заполнить оставшееся пространство в типе макета display: flex? Это просто сделать <div> заполнитьОстальное пространство, но у <img> есть свое представление о размере, которое мешает правильной работе макета.Например, предположим, что у нас есть:
- родитель
<div> с display: flex, - ребенок
<h1> с flex: 0 0 auto и - achild
<img> с flex: 1 1 0px.
При изменении размера окна <img> (или <canvas>) иногда точно соответствует, но иногда переполняет родительский элемент в зависимости от размера или соотношения сторонокно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Test</title>
<style>
body {
width: 100vw;
height: 100vh;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
margin: 0px;
border: 4px dashed lightcoral;
}
h1 {
flex: 0 0 auto;
margin: 0px;
border: 4px solid chocolate;
}
div {
flex: 1 1 0px;
border: 4px dotted darkorchid;
}
canvas {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 4px solid lightseagreen;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div><canvas width="400" height="200"/></div>
<script>
var c = document.getElementsByTagName('canvas').item(0);
var x = c.getContext('2d');
x.ellipse(100, 100, 50, 50, 0, 0, 360);
x.fill();
</script>
</body>
</html>