Need to change the behavior/resizing/cropping of these background images
I am currently building a site that uses this template. http://themes.potenzaglobalsolutions.com/html/webster-responsive-multi-purpose-html5-template/service-04.html
The element I am stuck on is a little more than halfway down the page where is says, "Lets get started with the Webster!"
I really like the feature of having two full width images with text and calls to action like that. The only problem is the way the images are behaving.
Rather than always remaining the same height and getting cropped as the viewport size decreases, I would like the image to always be 100% width and have the height resize proportionately.
I understand that very quickly, perhaps as soon as md or even lg size, the height of the text in the div next to it will exceed the height of the image, so at that media query, I'd like it to be replaced with a different image I will create that is a less wide rectangle.
Then once it hits the sm size, it's fine for the images to be hidden as they currently are.
This question assumes that the answerer is viewing the site on an xl viewport size to begin with, as I would assume most desktop and laptop computers are.
Is this too complicated for a single question?
The element I am stuck on is a little more than halfway down the page where is says, "Lets get started with the Webster!"
I really like the feature of having two full width images with text and calls to action like that. The only problem is the way the images are behaving.
Rather than always remaining the same height and getting cropped as the viewport size decreases, I would like the image to always be 100% width and have the height resize proportionately.
I understand that very quickly, perhaps as soon as md or even lg size, the height of the text in the div next to it will exceed the height of the image, so at that media query, I'd like it to be replaced with a different image I will create that is a less wide rectangle.
Then once it hits the sm size, it's fine for the images to be hidden as they currently are.
This question assumes that the answerer is viewing the site on an xl viewport size to begin with, as I would assume most desktop and laptop computers are.
Is this too complicated for a single question?
The easiest way is to put the image in the div and make the <img> 100% width rather than a background image. That way the image will always fit its container. You are not overlaying anything on the image so this should work.
In your responsive.css line 715 you have
@media (max-width: 991px)
.split-section .img-side {
display: none;
}@media (max-width: 991px)
/*
.split-section .img-side {
display: none;
}
*/col-lg-6 img-side img-leftcol-lg-12 img-side img-leftASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It won't let me edit or delete that comment above, but this is what I was trying to say:
I actually took a portion of all three of these suggestions as well as an idea I came up with on my own to come up with a solution that would work.
Since the images I wanted to use are product images overlayed on a patterned background, I actually separated the two elements. I used a css background image with object-fit for the pattern itself, because it was OK if the proportions of that got stretched; it was just the product itself that shouldn't get stretched.
Then for the actual product image, I used a real image in the div (not css bg image) but used a transparent png, so that it achieved the look I was going for for the product on the patterned background, but was separate from the background and used a fixed width so that it would resize with the viewport. I set the width to change based on viewport size, so that the div itself would always be tall enough.
And Scott, I probably will set the images to stack rather than disappear at smaller sizes. Thanks for that.
I don't think I would have come up with that without giving some thought to all your suggestions, so thank you.
I actually took a portion of all three of these suggestions as well as an idea I came up with on my own to come up with a solution that would work.
Since the images I wanted to use are product images overlayed on a patterned background, I actually separated the two elements. I used a css background image with object-fit for the pattern itself, because it was OK if the proportions of that got stretched; it was just the product itself that shouldn't get stretched.
Then for the actual product image, I used a real image in the div (not css bg image) but used a transparent png, so that it achieved the look I was going for for the product on the patterned background, but was separate from the background and used a fixed width so that it would resize with the viewport. I set the width to change based on viewport size, so that the div itself would always be tall enough.
And Scott, I probably will set the images to stack rather than disappear at smaller sizes. Thanks for that.
I don't think I would have come up with that without giving some thought to all your suggestions, so thank you.
The related css for this (right click inspect / see at the right for the style)
.split-section .img-holder from style.css width and height are set to 100%
I would not change this but instead clone it as it may break other template part.
Also check for related CSS class if you clone it
You can also tried with object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://www.w3schools.com/css/css3_object-fit.asp