I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.
I've tried using inline-block, inline and float but those don't work.
Here is what I got:
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You need to set the inside divs to inline-block, not the outside one.
<div id="banner">
<div class="inline-block">
<img src ="img1.jpg">
</div>
<div class="inline-block">
<img src ="img2.jpg">
</div>
<div class="inline-block">
<img src ="img3.jpg">
</div>
</div>
I removed all of your inline css because it is just bad practice. You should have a separate css file where you define the styles. I used "inline-block" as a class name here, but name it whatever you want.
In your external css file you would have this, if you kept my naming convention,
.inline-block {
display: inline-block;
}
Also, heres a working fiddle of another rendition, three images side to side.
https://jsfiddle.net/3m33emfd/
banner does NOT need to be set to inline-block, it is an outside container for your child divs. You would actually want #banner to be display: block, so I put that in my working fiddle.
use display:inline-block;
<div id="banner" style="overflow: hidden;justify-content:space-around;">
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img1.jpg">
</div>
<div class="" style="max-width: 100%;max-height: 100%;display: inline-block;">
<img src="img2.jpg">
</div>
<div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
<img src="img3.jpg">
</div>
</div>
give the following css
display: flex; justify-content:space-around;
<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;">
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
You have the images enclosed within div tags, which are block elements.
You should instead apply the style directly to the images, and do away with the divs, like this:
<img style="max-width:20%" src="…">
.image-div{
float:left;
margin-right:10px;
max-width: 20%;
max-height: 20%;
}
<div id="banner" style="overflow: hidden; ">
<div class="image-div" >
<img src ="img1.jpg">
</div>
<div class="image-div" >
<img src ="img2.jpg">
</div>
<div class="image-div" >
<img src ="img3.jpg">
</div>
<div style="clear:left;"></div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Studio </title>
<style>
.image {
display: inline-block;
}
</style>
</head>
<body>
<div id="banner" style="overflow: hidden; display: inline-block;">
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img1.jpg">
</div>
<div class="image" style="max-width: 100%; max-height: 100%;">
<img src ="img2.jpg">
</div>
<div class="image" style="max-width: 20%; max-height: 20%;">
<img src ="img3.jpg">
</div>
</div>
</body>
</html>
Related
I have this piece of code. It doesn't scale my images to this size.
Height and width doesn't work. Why?
in style.css i have this line:
.gallery-popup .image-container img{width: 100%; height: auto; display: block;}
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="tagline">
<div class="content">
<div class="title">TITLE</div>
<div class="description">TEXT</div>
</div>
</div>
</div>
<div class="overflow">
<div class="swiper-container" data-autoplay="0" data-loop="1" data-speed="500" data-center="0" data-slides-per-view="1">
<div class="swiper-w">
<div class="swiper-s">
<div class="image-container">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="description">
<div class="title">titletext</div>
<div class="text">texttexttext.</div>
</div>
</div>
</div>
Without any css to look in is this the responsive css for <img> images. Give the img a width and set the height to auto. You do not have to use the height and width in the html, use the css to give a width only
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" alt="" />
.trace img {
width: ...; /* use for example px or % */
max-width: 100%;
height: auto; /* this line to preserve width:height ratio */
border: 0; /* remove default border of img */
}
I want to create a grid of images that first has a large featured image, then to it's right, has a grid of 4 (2 on each row).. and then underneath that, rows of 4 images at a time.
Loosely based on this design.
I think flexbox would probably be able to nail this one.
Say I have some markup like this
<div class="image-grid">
<div>
<img src="https://unsplash.it/1024/1024">
</div>
<div>
<img src="https://unsplash.it/1000/800">
</div>
<div>
<img src="https://unsplash.it/1100/1000">
</div>
<div>
<img src="https://unsplash.it/1120/1000">
</div>
<div>
<img src="https://unsplash.it/1130/1024">
</div>
<div>
<img src="https://unsplash.it/1101/1024">
</div>
<div>
<img src="https://unsplash.it/1020/1024">
</div>
<div>
<img src="https://unsplash.it/1021/1024">
</div>
<div>
<img src="https://unsplash.it/1002/1024">
</div>
<div>
<img src="https://unsplash.it/1003/1024">
</div>
<div>
<img src="https://unsplash.it/1004/1024">
</div>
<div>
<img src="https://unsplash.it/1005/1024">
</div>
</div>
with CSS
.image-grid {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
.image-grid > div:first-child {
flex-basis: 50%;
}
.image-grid > div {
flex-basis: 25%;
}
this almost does what I need it to. Codepen here.
I need two things fixed though...
display 4 images to the right of the featured image, instead of the current 2.
stretch each image to fit it's space so it's a tight grid (no spacing around any image). I'm thinking of using the object-fit CSS property but I haven't got it working yet.
Thank you.
So I figured the easiest way would be to use a framework like Foundation to create the top row, and then use flexbox for the rest.
<div class="row">
<div class="medium-6 columns featured-image">
<img src="https://unsplash.it/1023/1024">
</div>
<div class="medium-6 columns featured-image-grid">
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1024/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1022/1024">
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1021/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1020/1024">
</div>
</div>
</div>
</div>
<div class="image-grid">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
<img src="https://unsplash.it/1020/1022">
<img src="https://unsplash.it/1020/1021">
<img src="https://unsplash.it/1020/1029">
<img src="https://unsplash.it/1020/1028">
<img src="https://unsplash.it/1020/1027">
<img src="https://unsplash.it/1020/1023">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
</div>
with the CSS
.row {
max-width: 100%;
margin: 0 !important;
}
.columns {
padding: 0;
}
.featured-image img {
height: 400px;
}
.featured-image-grid img {
height: 200px;
}
img {
object-fit: cover;
width: 100%;
}
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid > img {
flex-basis: 25%;
height: 200px;
width: auto;
}
Codepen here.
It needs some work to make it responsive, but it works for what I needed it to do.
.image-grid {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 200px;
height: 100px;
}
.image-grid, .featured > img:first-child {
width: 100px;
height:100px;
}
.image-grid > img {
width: 50px;
height:50px;
}
<div class="image-grid featured">
<img src="https://unsplash.it/1024/1024">
<img src="https://unsplash.it/1000/800">
<img src="https://unsplash.it/1100/1000">
<img src="https://unsplash.it/1120/1000">
<img src="https://unsplash.it/1130/1024">
</div>
<div class="image-grid">
<img src="https://unsplash.it/1101/1024">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1021/1024">
<img src="https://unsplash.it/1002/1024">
<img src="https://unsplash.it/1003/1024">
<img src="https://unsplash.it/1004/1024">
<img src="https://unsplash.it/1005/1024">
</div>
I want to adjust the size of the image to cover up the entire div. It would be very helpful if you guys can suggest anything in CSS rather than using javascript for it.
Here is a sample of what i have right now
.third{
width:30%;
float:left;
margin:8px;
}
.second{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
img{
width:100%;
object-fit:fill;
}
<div class="first">
<div class="second">
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
</div>
</div>
Here is the link to the codepen for more details: http://codepen.io/gruler05/pen/vGyObo
The first, third and the fourth images are smaller than the rest. Can anyone please tell me how can I stretch those image to the size of their container div so that it looks like all the images are of the same size. Thank you in advance. P.S: I tried object-fit but it didn't work.
Using background-size:cover; in your CSS rules for the element is probably the easiest way to get full image coverage. This might cut off some of the content, though, depending on if you center the background image in the div or how you resize it.
background-size:contain; might be more useful, but I'm a huge fan of the cover size property.
Update
If you want to avoid background-image then you could try an img tag set to 100% width and/or height, but this will warp your image and cause other issues, and you'd potentially have to perform some JS calculations to prevent this.
Why the aversion to using a background image?
Here is a few ways, depending on if you want stretch or clipped images.
In sample 1 and 2, the trick I used is to keep the img as visibility: hidden to not have to set a fixed height on the third div.
Also, using the inline style for the image url, you can easily make that work with angular without messing with the external CSS.
Sample 1 - stretched
.third {
flex: 1 0 calc(33% - 16px);
margin: 8px;
position: relative;
background-size: 100% 100%;
}
.second{
display: flex;
flex-flow: row wrap;
}
img {
visibility: hidden;
width: 100%;
height: auto;
}
<div class="first">
<div class="second">
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
</div>
</div>
Sample 2 - clipped, center aligned
.third {
flex: 1 0 calc(33% - 16px);
margin: 8px;
position: relative;
background-size: cover;
background-position: center;
}
.second{
display: flex;
flex-flow: row wrap;
}
img {
visibility: hidden;
width: 100%;
height: auto;
}
<div class="first">
<div class="second">
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
</div>
</div>
Sample 3 - clipped, center aligned, fixed height (removed the img as well)
.third {
flex: 1 0 calc(33% - 16px);
margin: 8px;
position: relative;
background-size: cover;
background-position: center;
height: 150px;
}
.second{
display: flex;
flex-flow: row wrap;
}
img {
visibility: hidden;
width: 100%;
height: auto;
}
<div class="first">
<div class="second">
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
</div>
<div class="third" style="background-image: url( https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg)">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
</div>
<div class="third" style="background-image: url(http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg)">
</div>
</div>
</div>
Try adjusting your .third, it has a default padding that you can remove by adding the below CSS. You can adjust the height to however much you need. This way you can avoid background-image, but background-image would still be most efficient.
.third {
width: 33.33%;
height: 100px;
float: left;
margin:0;
padding:0;
}
You can do this, but it will lose the image's aspect ratio.
HTML: Add a div with class="row" and put 3 images inside each
<div class="first">
<div class="second">
<div class="row">
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
</div>
<div class="row">
<div class="third">
<img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
<div class="third">
<img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg">
</div>
</div>
</div>
</div>
CSS: add the following code to give the .row a fixed height and set the image height to 95%
.row{
height:150px; //whatever height you want
}
.third img{
height:95%;
}
First delete all the <img> tags
then use this css
.third{
width:290px;
height:180px;
float:left;
margin:8px;
background-image:url("https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg");
background-size:cover;
}
Although flexbox is a great approach, The most easiest approach to do it by using tables, and inserting the images as data.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Images</title>
</head>
<body>
<table>
<tr>
<td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"></td>
<td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td>
<td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"> </td>
</tr>
<tr>
<td> <img src="https://i.ytimg.com/vi/nT8pKpXQSJY/maxresdefault.jpg" width="200" height="200"> </td>
<td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td>
<td> <img src="http://i1.wp.com/proyectart.es/wp-content/uploads/2015/10/One-Punch-Man.jpg" width="200" height="200"> </td>
</tr>
</table>
</body>
</html>
I have a gallery and the thumbnails are set to have a width of 100%. however some images do not fill the full height of this div.
How do I get it so that the images stretch over the full width and height of the div? (can't be changed to background images)
<div class="gallery-grid">
<div class="section group">
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
</div>
<!--style-->
.gallery-grid img{
width:100%;
}
It works for me. You must have some other css affecting it. See here: http://codepen.io/anon/pen/JGmRBW
.gallery-grid img{
width:100%;
}
Try this:
gallery-grid .section .col a{
display: block;
}
.gallery-grid .section .col a img {
width: 100%;
height: 100%;
}
You should consider that a is an inline element, so to put an image propely in it, you may need to set its display property correctly.
In action
a{
display: block;
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
<p>The parent anchor has 100x100 dimensions:</p>
<p>The child image has 100x50 dimensions:</p>
<img src="https://placehold.it/100x50">
I am trying to display several <div> tags (with <img /> tags inside them in a grid like fashion, where they are side by side until the end of the parent element, at which point the next <div> would wrap.
I have the code:
<div style="text-align:center; height: auto; ">
<div style="display: table; margin: auto">
<div style="width: 200px; height: 250px; float: left;">
<img src="image1.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image2.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image3.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image4.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image5.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image6.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image7.jpg" height="200" width="200" />
</div>
</div>
</div>
And the output is almost there. The <div> elements are wrapping as expected, but they do not center as expected.
My question is: what do I need to do to get this 'grid' of <div> elements to be centered, yet still displayed in a grid-like format?
I've seen a few other SO question pertaining to this, but none of them solve my issue - or rather they describe slightly different issues.
Floating the divs keeps them from centering... Instead, make your wrapper div text-align: center, and the divs inside as display: inline-block. No need for display:table
Like this: http://jsfiddle.net/ceL79/
See demo: http://jsfiddle.net/3C6kt/
HTML
<div class="center_wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
.center_wrap {
width:500px;
text-align:center;
}
.box {
width:100px; height:100px;
background:#999;
display:inline-block;
}
You can insert images inside div's then...