I want to display different sizes of images in rows. 6 images with proper margins for desktop, 2 images in a line for portrait and 4 images for landscape orientation. Extra images should be in a new line and aligned center.
<div class="wrapper">
<div class="media-elements ">
<div class="common-image">
<figure class="figure">
<img src="img1.png" class="img-fluid" alt="" title="">
<figcaption class="figure-caption">
</figcaption>
</figure>
</div>
</div>
<div class="media-elements ">
<div class="common-image">
<figure class="figure">
<img src="img2.png" class="img-fluid" alt="" title="">
<figcaption class="figure-caption">
</figcaption>
</figure>
</div>
</div>
<div class="media-elements ">
<div class="common-image">
<figure class="figure">
<img src="img3.png" class="img-fluid" alt="" title="">
<figcaption class="figure-caption">
</figcaption>
</figure>
</div>
</div>
<div class="media-elements ">
<div class="common-image">
<figure class="figure">
<img src="img4.png" class="img-fluid" alt="" title="">
<figcaption class="figure-caption">
</figcaption>
</figure>
</div>
</div>
</div>
I tried float: left and display:inline-block but none of these give me expected results. Thanks in advance.
You would need to use a combination of flex and media query. I have compiled an example for you but you can further improve it.
.slider {
display: flex;
width: 100%;
height: auto;
margin: 20px auto;
text-align: center;
}
#media only screen and (max-width: 1024px) {
.slider {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
}
Please check the fiddle below.
https://jsfiddle.net/harsh89/x40kagm6/9/
You can use display: grid
.wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
figure img {
width: 100%;
}
JSFiddle: https://jsfiddle.net/y8pLs57g/
Try this:
.figure {
float: left;
width: 33.33%;
padding: 5px;
}
.common-image::after {
content: "";
clear: both;
display: table;
}
I am trying to done is have a responsive div with 2 pictures centered, one in each div.
What I am want it is to drop down, when the screen is small and not big enought to display them side by side.
At the moment with the below when the screen is smaller it pushes the images into each other.
<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="left_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="right_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:
.container {
width: 100%
}
.inner_container {
width: 49%;
display: inline-block;
}
.img_container {
width: 100%;
}
.img_container a img {
width: 100%;
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.co.uk">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.com">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
</div>
With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:
.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }
#media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
Set a min-width on the .inner_container
.container {
width:100%;
overflow: hidden;
}
.inner_container {
float:left;
width:50%;
min-width: 250px;
}
.img_container {
width:250px;
margin:0 auto;
padding-bottom:5px;
text-align: center;
}
http://jsfiddle.net/63pnotjc/
When I posted my reply, I didn't notice Fahad, Show code snippet link.
Thank you both for your help, this is the css code I went with in the end.
.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}
#media (max-width:501px){
.inner_container{display:block;width:100%;}
}
Once again thank you both for your help :)
My code is as Follows:
<div class="abc">
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
</div>
How can I make the image responsive for Mobile(360X640px) and iPad(768X1024px)?
Can you please give me the CSS Code?
I have to give two Images in Mobile and Four in iPad in one line!!
Here is the code you need to follow :
img {
max-width: 100%;
height: auto;
}
Refer : http://html5hub.com/html5-picture-element/
Remove width and height attribute from img tag and add in CSS file for this image max-width:100%; width:100%;
this setting the image you want to set as a background image in a div and give set the background size as cover
background-image: url('YOUR URL');
background-size: cover;
set width and height in percentage
<img class="img1" width="100%" height="100%"/>
use media query
/* Landscape */
#media screen and (min-aspect-ratio: 1/1) {
//use your style for landscape
}
/* Portrait (i.e. narrow viewport) */
#media screen and (max-aspect-ratio: 1/1) {
// your style for portrait
}
Using media query you can divide the images as you like.
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
#media all and (max-width: 360px){
.bcd
{
display:inline-block;
width:49%;
}
}
DEMO
<style>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
.container .bcd{float: left;position: relative;}
.container .bcd div{background-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;}
.container .bcd div img{border-radius: 5px 5px 0 0;height: auto;width: 100%;}
.container .bcd div a.bottom{background: none repeat scroll 0 0 #fff;bottom: 4px;color: #000;font-size: 14px;padding: 9px 0 5px;position: relative;width: 100%;display: inline-block;}
.container .bcd div a.bottom h3{padding: 0 10px;}
#media (max-width: 700px) {
.bcd{width: 100%;}
.bcd div{margin: 0 10px}
}
#media (min-width: 700px) {
.bcd {width: 50%;}
.bcd:nth-child(odd) div {margin-left: 10px;margin-right: 5px;}
.bcd:nth-child(even) div {margin-left: 5px;margin-right: 10px;}
}
</style>
<div class="container">
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div style="clear: both;margin: 0px;padding: 0px;"></div>
</div>
Demo
CSS:
img {
max-width: 100%;
max-height: 100%;
}
HTML:
<img class="img" src="image.png">
<style>
#media only screen and (max-width: 1024px) {
.abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;}
.abc .bcd a img{width:100%;height:auto;}
}
#media only screen and (max-width: 640px) {
.abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;}
.abc .bcd a img{width:100%;height:auto;}
}
</style>
You can remove the border.
If you remove border, then you can use width 25% for 4 rows in one line and 50% for 2 rows in one line.
I have an image gallery. The thumbnails are 240px in width, but the heights vary. I tried cropping the images so that they are all 150 pixels high.
At the moment I've got this:
HTML
<div data-category="category1">
<a href="image1.jpg" rel="lightbox[on]" title="">
<img src="image1.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image2.jpg" rel="lightbox[on]" title="">
<img src="image2.jpg" width="" height="" />
</a></div>
<div data-category="category1">
<a href="image3.jpg" rel="lightbox[on]" title="">
<img src="image3.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image4.jpg" rel="lightbox[on]" title="">
<img src="image4.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image5.jpg" rel="lightbox[on]" title="">
<img src="image5.jpg" width="" height="" />
</a></div>
<div data-category="category2">
<a href="image6.jpg" rel="lightbox[on]" title="">
<img src="image6.jpg" width="" height="" />
</a></div>
CSS
.gallery {
position:relative;
}
.gallery > div {
position:absolute;
}
.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}
This works with cropping the images to 150px, but only the images on the top row are aligned. The images on the other rows are not aligned because they are being placed directly below the original heights of the images on the row above. (The cropping doesn't get rid of the rest of the image. The rest of the image is not visible, but it's still there,). What do I need to add to my CSS to sort this out?
Surely your code is a bit more complex of what you paste here, but please take in consideration this base css:
.gallery { position: relative; }
.gallery > div { float: left; }
.gallery > div > a { max-height: 150px; width: 240px; overflow: hidden; display: inline-block; }
.gallery > div > a > img { border: none; }
Here a working example:
http://jsfiddle.net/3W7Xt/
Regards
I have two images that need to kept inline; I want to write a caption under each image.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
How can I implement?
Figure and Figcaption tags:
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
Gotta love HTML5.
See sample
#container {
text-align: center;
}
a, figure {
display: inline-block;
}
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
}
figure {
padding: 5px;
}
img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
}
<div id="container">
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
</a>
</div>
CSS
#images{
text-align:center;
margin:50px auto;
}
#images a{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;
}
HTML
<div id="images">
<a href="http://xyz.com/hello">
<img src="hello.png" width="100px" height="100px">
<div class="caption">Caption 1</div>
</a>
<a href="http://xyz.com/hi">
<img src="hi.png" width="100px" height="100px">
<div class="caption">Caption 2</div>
</a>
</div>
A fiddle is here.
For responsive images. You can add the picture and source tags within the figure tag.
<figure>
<picture>
<source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
<source media="(min-width: 500px)" srcset="images/image.jpg" />
<img src="images.jpg" alt="An image">
</picture>
<figcaption>Caption goes here</figcaption>
</figure>
Put the image — let's say it's width is 140px — inside of a link:
<a><img src='image link' style='width: 140px'></a>
Next, put the caption in a and give it a width less than your image, while centering it:
<a>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.
<a style='text-decoration: none; color: orange;'>
<img src='image link' style='width: 140px'>
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example: http://www.alphaeducational.com/p/okay.html
<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<img src="hello.png" width="100px" height="100px">
caption 1
</div>
<div style="float: left;">
<img src="hi.png" width="100px" height="100px">
caption 2
</div>
</div>
CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:
CSS
.images {
text-align:center;
}
.images img {
width:100px;
height:100px;
}
.images div {
width:100px;
text-align:center;
}
.images div span {
display:block;
}
.margin_right {
margin-right:50px;
}
.float {
float:left;
}
.clear {
clear:both;
height:0;
width:0;
}
HTML
<div class="images">
<div class="float margin_right">
<img src="hello.png" width="100px" height="100px" />
<span>This is some text</span>
</div>
<div class="float">
<img src="hi.png" width="100px" height="100px" />
<span>And some more text</span>
</div>
<span class="clear"></span>
</div>
To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:
HTML
<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>
CSS
.items{
text-align:center;
margin:50px auto;}
.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}
https://jsfiddle.net/c7borg/jLzc6h72/3/
The <figcaption> tag in HTML5 allows you to enter text to your image for example:
<figcaption>
Your text here
</figcaption>.
You can then use CSS to position the text where it should be on the image.
<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>
Style as desired.