PasleChoix Posted September 22, 2018 Share Posted September 22, 2018 Hello Gurus, I have a homepage here: http://venushomedesign.com/ . Here are the issues: 1. The banner is not displayed completely on my screen (21", 1920x1280) 2. from a Mac it shows completely twisted: not only banner is showing only the middle 2/3 part of the banner, but all the thumbnail pictures are not in the original ratio (squeezed) I have attached two screenshots here for the reference. It would be greatly appreciated if someone can help me to sort it out, thank you very much in advance. Link to comment Share on other sites More sharing options...
PasleChoix Posted September 22, 2018 Author Share Posted September 22, 2018 Screenshot from Mac is here: https://snag.gy/2RNMxI.jpg The desired effect is like this: https://snag.gy/zYNUXi.jpg Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2018 Share Posted September 23, 2018 If you set min-height and that height is not proportional to the image, cover will increase in height AND width till it fills completely the container height, this will cause left/right edges of background image beyond that of container edges, clipping it down. Might be better to use img tag rather than background image, as you can set it to 100% width, height auto; and let it control the height of its containing element. Link to comment Share on other sites More sharing options...
PasleChoix Posted September 23, 2018 Author Share Posted September 23, 2018 (edited) Thank you very much, can you provide the code here? if this can be applied to the banner, what about the thumbnails? they are not background images. Edited September 23, 2018 by PasleChoix Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now