I'm working on creating a responsive <div> that contains a perfectly square SVG image and some accompanying text. Here is my current progress, thanks to piecing together information from various Stackoverflow replies:
<div class='outer'>
<div class='inner'>
<svg width='100%' height='100%' viewBox='-35 -35 70 70'
preserveAspectRatio='xMaxYMin meet' id='yadayadayada'
xmlns='...' version='1.1' xmlns:xlink='...' xmlns:svgjs='...'>...</svg>
</div>
</div>
The above code generates the SVG image using SVG.js:
let image = SVG().size('100%', '100%')
.addTo('.inner')
.id('yadayadayada')
.viewBox(-35, -35, 70, 70)
.attr({preserveAspectRatio: 'xMaxYMin meet'});
//
// SVG drawing stuff
//
This is accompanied by the following CSS styling:
div.outer::before, div.outer::after {
height: 5%;
display: block;
content: "";
margin: 0 0 0 0;
}
div.outer {
margin: 0 0 0 0;
padding-left: 5%;
padding-right: 5%;
width: 90%;
height: 90%;
}
div.inner {
width: 100%;
height: 100%;
position: relative;
}
This layout results in:
+------------+---------------+
| | |
| | |
| | |
| Blank | SVG |
| | |
| | |
| | |
+------------+---------------+
Essentially, a <div> filling the entire window with a 5% margin on each side, housing a square SVG image on one side. However, I am facing challenges when trying to add text next to the image within the same size constraints without displacing the image downwards.
It appears that the <svg> may not be perfectly square, causing it to protrude out of its intended container if text is introduced.
If anyone has suggestions on achieving a large square image alongside text while maintaining responsiveness, I would greatly appreciate the guidance. The goal is to ensure the design remains visually appealing even during fullscreen mode shifts or presentation scenarios where landscape orientation prevails.