Keeping The Original Proportions Of An Image
Alex Walker
I have added images using the Image Content addon such as here: https://jamesmackie.art/marbles All the images are the same size an proprtion (boxed) and I want them to retain their original size and dimension in the thumbnail. How can I do that please?
Paul Frankowski
Accepted AnswerOh, I think I know.... it's problem for Devices with screen between 576 - 767px, here is a solution:
@media screen and (min-width: 576px) and (max-width: 767.98px) {
.sppb-addon-image-content .sppb-image-holder {
position: inherit; width: 100% !important; height: 300px;}
}
Rashida Rahman
Accepted AnswerHi there!
Thanks for contcting us.
This addon has the image as background image, so it does cover the whole space of the container/holder. So, it's probably not possible to get the original proportion of the image in the image content addon.
Here is a sample screenshot: https://prnt.sc/lO3CvJbViHLm
Best Regards
Paul Frankowski
Accepted AnswerHi Alex,
it's better to use Image Layout addon where image is < img > not a background-image CSS.
OR
keep addon that you have already but use below custom CSS
.sppb-addon-image-content .sppb-image-holder {
background-size: contain;}becuase by default it's background-size: cover (!)Alex Walker
Accepted AnswerPaul see jamesmackie.art/marbleemarblesmarbles marbles suspension 2. - how can i have only one image displaying?
Paul Frankowski
Accepted AnswerAre you sure that URL is correct, I see Error 500 there.
Here is small update of my Custom CSS, should be:
.sppb-addon-image-content .sppb-image-holder {
background-size: contain;
background-repeat: no-repeat;}then only 1 image will be displayed. Add it inside Template Options > Custom Code > Custom CSS and then will be used everywhere.
Alex Walker
Accepted AnswerPaul, that worked perfectly! Thank you!!!
Alex Walker
Accepted AnswerPaul, just one more thing. when viewing the image in Landscape on a mobile the text covers the image. Can the text go beneath or alongside the image?
Paul Frankowski
Accepted Answerwhen viewing the image in Landscape on a mobile the text covers the image
Can you show me screenshot link, on Mobile view (browser elmulator) looks OK