Имеется контейнер #container
фиксированной высоты, вложенный контейнер #wrap
и svg
внутри последнего. В svg
контейнере имеется rect
с фоновым изображением шириной 600px. Контейнер #wrap
занимает 100% ширины экрана и не более 600px. Каким образом можно изменить поведение svg
контейнера так, чтобы вложенный rect всегда был по центру контейнера без использования js?
#container {
height: 300px;
}
#wrap {
/*border: 1px solid red;*/
max-width: 600px;
width: 400px;
height: 100%;
margin: auto;
}
<div id="container">
<div id="wrap">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600px" height="300px">
<image href="https://dummyimage.com/600x300/3029b3/fff" x="0" y="0" width="600px" height="300px"></image>
</pattern>
</defs>
<rect x="0" y="0" width="600px" height="300px" fill="url(#img1)"></rect>
</svg>
</div>
</div>
Должно получиться так: