JoshuaVdM Posted February 9, 2017 Share Posted February 9, 2017 I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html Link to comment Share on other sites More sharing options...
Sunamena Posted February 9, 2017 Share Posted February 9, 2017 Hello,Try to use a CSS file to style. Using inline CSS ( style="" ) will make editing your website hard, and will make it even harder to build one.One CSS file can be aplied to multiple webpages.As to solve your problem, why not consider using a Flex box? http://www.w3schools.com/css/css3_flexbox.asp 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