pretesh Posted April 11, 2016 Share Posted April 11, 2016 (edited) When using box-sizing border-box on images do I have to use specific dimensions (e.g width: 100px, height: 200px) for it to work properly? I'm building a site with responsive images next to each other but separated by a border. It works fine on the left and right borders but the top and bottom borders are not contained within the image thus pushing other images next to it out of sync. This issue is really frustrating as I have googled to find a solution but found nothing, not even someone with the same problem. My image sizes are Width: 100% and height: auto. Is this not allowed for box-sizing border-box? Can anyone provide a fix for this as I can't use outline or box shadow for what i want to do? Here is my html and css, i've also uploaded screen grabs of my issue: <div id="rightCol"> <img src="./images/pa.jpg"/> <img src="./images/game.jpg"/> <img src="./images/spine.jpg"/> </div> <div id="leftCol"> <img src="./images/truck.jpg"/> <img src="./images/ccc.jpg"/> <img src="./images/box.jpg"/> </div> #rightCol { width: 50%; height: auto; float: right; } #rightCol img { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-left:2px solid white; border-bottom: 4px solid white; display: block; } #leftCol { width: 50%; height: auto; } #leftCol img { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-right:2px solid white; border-bottom: 4px solid white; display: block; } Edited April 11, 2016 by pretesh 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