Three images are arranged in this manner:
https://i.stack.imgur.com/u4PdK.png
The HTML code for this setup is as follows:
<div class="lb-controlContainer">
<div class="lb-closeContainer">
<a class="lb-close"></a>
</div>
<div class="lb-downloadContainer" hidden="">
<a class="lb-download"></a></div><div class="lb-turnContainer" hidden="">
<a class="lb-turnLeft"></a><a class="lb-turnRight"></a>
</div>
<div class="lb-zoomContainer">
<a class="lb-zoomOut"></a>
<a class="lb-zoomIn"></a>
</div></div>
CSS Styling:
.lb-data .lb-zoomOut {
display: block;
float: left;
width: 30px;
height: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAAN...;
.lb-data .lb-close {
display: block;
float: right;
width: 20px;
height: 20px;
background: url(data:image/png;base64,iVBORw0KGg...;
}
When attempting to change the button size to `width: 10px;height: 15px;`, the layout appears like this:
https://i.stack.imgur.com/AyGKR.png
Here is an alternative view:
https://i.stack.imgur.com/alVoO.png
The container values have been altered, but the image size remains unchanged.