Need help with div heights on background image at different media queries.

https://www.stadriemblems.com/products/custom-enamel-pins/

At the top of this page, I am working on some code that will allow me to use a different background image for different media queries. That part is working, but I can't figure out whether or not there's a way to make the height of the div match whatever the height of the background image is at any given time. Right now I'm using min-height, which really doesn't work, because the height will be constantly changing as the image resizes.

CSS is in enamelpins.css

Also, why is there space on the left and right on the image? How to I make it touch the sides?
LVL 1
MarisaWeb DesignAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Juana VillaFront-end DeveloperCommented:
Hi,

Remove the space on the right and left of the image by:
.col-xs-12{
padding: 0;
}

In order to make the div the same height as the image you will have to use js. Remember to call the js every time you change the image:
Codepen
0
MarisaWeb DesignAuthor Commented:
Hi Juana,
Does that have to go in a separate js file?
0
Juana VillaFront-end DeveloperCommented:
It can be on its own js file or you can add it on the head section of the html. I added the window widths which should match the media queries where you are planning to change the image.
(If you have it on its own file remove the <script> tags)

<script>
$( document ).ready(function() {
var img = $(".box > img");
$(".box").css({height:img.height()});

if ($(window).width() < 960) {
$(".box").css({height:img.height()});
}
else {
$(".box").css({height:img.height()});
}
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MarisaWeb DesignAuthor Commented:
Hi sorry again. Correct me if I'm wrong, but isn't that just replacing what I was already doing with the min-height property? I wanted to not have to define heights; I wanted the height of the div to adjust based on whatever the height of the image truly is in pixels is at any given time.
0
Juana VillaFront-end DeveloperCommented:
That is correct Marisa,
Let me explain the js:
var img = $(".box > img");  // Here we are making a variable. Where we are finding the image
$(".box").css({height:img.height()}); // We are saying: to the "box" (your div) change its css to be the same height as the image height

Try it and let me know if you need more help.
0
MarisaWeb DesignAuthor Commented:
Oh, my goodness. I took your code and put values inside of the parenthesis. For example:

.css({width:img.width(), height:img.height(1248)

I thought it was a template and I was supposed to put my custom media query heights in there. I didn't realize you'd given me the exact code!

I'm about to leave, but I will mess with this tomorrow and see what happens.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.