newcoder1010 Posted October 16, 2016 Share Posted October 16, 2016 Hello, I have used the below code for responsive images. Slideshow takes the full width of the screen. I have visited different browsers. First image in the slideshow is giving me hard time. It stretches out and make the first image look really bad in different browsers. If you please visit my page and help me to fix the issue for the first image. My link webuyhousesinnova.com. I like my images to be 700px height in the slideshow. I created each image with the same height(700px) first manually and then uploaded the images. Last 2 images are ok but the first one stretches bad... .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { height: 700px !important; min-height: 700px; width: 100% !important; } .view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img { height: 700px; min-height: 700px; width: 100%; margin-top: 50px; margin-left: auto; margin-right: auto;margin:0px; } Link to comment Share on other sites More sharing options...
Ingolme Posted October 16, 2016 Share Posted October 16, 2016 That's because you've set the width to 100%. It's forcing the image to be 100% wide while also being 700px tall, which will change the aspect ratio. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 16, 2016 Author Share Posted October 16, 2016 (edited) I just removed 100% and images are not full width of the screen. I guess I am confused here. How can I make the images full width of the screen by keeping the same height? or I should not use height? If I keep 100% width but no height, images are better but heights are not same for all images. If I dont have any width plus fixed height, images are not full width of the screen but the same height for all. Please advise. Edited October 16, 2016 by newcoder1010 Link to comment Share on other sites More sharing options...
Ingolme Posted October 16, 2016 Share Posted October 16, 2016 Remove this line: height: 700px !important; It's forcing the image to be 700px tall no matter what the width is. Also, setting min-height to 700px and width to 100% will probably force some of the flatter images to distort in order to meet your requirements. What you should do is open all these images in an image editor and crop them all to be the exactly same size. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 16, 2016 Author Share Posted October 16, 2016 First I opened each image in paint and resized the image to 1350x550. Modified my code as below. Is this what you are asking? .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide { width: 100% !important; min-height: 550px; } .view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img { margin-top: 50px;min-height: 550px; margin-left: auto; margin-right: auto;margin:0px; width: 100% !important; } Link to comment Share on other sites More sharing options...
Ingolme Posted October 16, 2016 Share Posted October 16, 2016 Forget the min-height property, you don't need it and it's going to mess things up. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 16, 2016 Author Share Posted October 16, 2016 That's correct. When I had min height, it is overlapping on the next region. I removed min height, it is not overlapping. When i resize the screen on desktop, Page is not being refreshed/responsive automatically. Is there any reason for that? Overall, images look better. If I can do anything more to improve, please let me know. Thanks much. 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