You don't need to be an 'investor' to invest in Singletrack: 6 days left: 95% of target - Find out more
.img1container {
position: absolute;
left: 16mm;
top:58mm;
width: 387mm;
height: 180mm;
z-index: 2;
overflow: hidden;
text-align:center;
}
.img1container img {
width: 100%;
}
<div class="img1container">
<imgsrc="[[Image1]]" contenteditable="true" />
</div>
How to I get the image to centre vertically, ie to overflow top and bottom, instead of just overflowing to the bottom?
Take your pick from CSS Tricks It's a good site to bookmark for CSS stuff anyway
will try ta.
I can't believe you asked that on here. Well done 🙂
And more usefully, my memory is you need a vertical-align and an inline block somewhere but I can't exactly remember where. I'll Jose when I get home
I can’t believe you asked that on here. Well done
Ah, but we have no idea what he really asked.
sorted, got it. 🙂
.img1container {
position: absolute;
left: 16mm;
top:58mm;
width: 387mm;
height: 180mm;
z-index: 2;
overflow: hidden;
}
.img1container img {
width: 100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
centres top/bottom, left/right;
Next question, that's fine I now have a choice of fit width or fit height, and it'll centre, horizontally and vertically and clip the overlay.
How do I get it to auto fill by height or width, and the proportion of the images is likely to be variable. So that is more desirable than having to make the decision as to to width: 100%; or height: 100%;
I can’t believe you asked that on here. Well done
is that good or bad? 😀
Does it have to be an IMG inside the DIV? You could set the DIV's background to the image source, then use the following CSS:
background-position: center;
background-repeat: no-repeat;
background-size: cover;
ah, doesn't work in the pdf generation bit, bugger.
Will have a go at the background image thing. ta.