What I'm trying to do is put three images (this one: http://baseframe.co/a/img/animus.png) in a three column grid system with two layers.
I really struggle with putting divs next to each other so if anyone can explain it alongside the problem I'm having about, it'd be really helpful!
Thanks,
Aaron
EDIT:
Here is my code:
`http://codepen.io/aaronmtx/pen/PGdGyA`
You probably want to use display: inline-block. So...
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
Where each <div> and <img ...> is styled...
div {
display: inline-block;
}
img {
width: 100%;
}
This is a very simple approach as you will likely want some additional styles to be applied. Constrain the width of each <div> to say 33% to get three equal sized images in a row. Then repeat the HTML so it will break the next three images on a new line. Applying a width of 100% to each <img ...> will ensure they don't spill out of their respective div containers.
Hope this is what you were looking for!
Related
How can I resize two images via a percentage of themselves (their native size) and have those images appear horizontally adjacent without space between them?
The trouble I am having is the containing divs appear to be sized according to the contained images original dimensions, not the resized dimensions. Setting display:inline-block; does prevent them from wrapping, but only if the width of the view is wide enough to accommodate the original image sizes. It does not reduce the size of the div. I feel like I am overlooking something obvious, but am too close to see it.
This code is based on this answer to this question. I tried it with figure elements instead of divs per the same answer and with many variations with no luck.
Some of the other answers I was not able to use because my solution constrained to an antiquated wiki html editor that filters out attributes and tags it does not like on save (e.g. srcset).
.img-box {
width: fit-content;
display: inline-block;
}
.img-box img {
width: 25%;
}
<div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
I'm having some issue with a video div that will have a responsive width.
There's 3 images that need to stick to the video element
green (left side)
orange (right side)
red (bottom side)
The issue's is that
If I make it one big background image it will be stretched and the arrows lose it's aspect ratio.
How could I go about achieving this effects? Whilst keeping full responsiveness.
This presents an interesting challenge. I'm sure others have written something potentially more useful. I just wanted to practice my written communication skills.
I discovered a method to help with your question:https://codepen.io/viewtifulmoejoe/pen/yPvQmz?editors=1100
I'm putting in this code to fulfill the code requirement of SO.
<div class="viewer_component">
<div class="viewer_component__bgImg">
<img src="https://i.imgur.com/rQmri0X.jpg" alt="">
</div>
<div class="viewer_component__video">
<a href="#">
<img src="https://placehold.it/854x480" alt="" class="viewer_component__video--src">
</a>
</div>
</div>
I used this image to prototype a method: https://imgur.com/rQmri0X
The black outline serves as the imaginary frame around the video similar to the image you posted.
I used a placeholder image to imitate the video and used the dimensions of a traditional youtube video.
The method requires that the imaginary frame in the background image match the ratio of the video container. This is the only way I know to make the the effect work as expected without plugins/libraries/javascript.
Please let me know if this helps you with this challenge. Any questions, I'm happy to oblige.
A more scalable method would be to have multiple images saved out. 1 for the left/top/right/bottom of the video container and position them relative to the video. This method requires a bit of finesse.
This should not be too hard using either flexbox or display: table;. Take a look at the following example:
.container {
display: flex;
}
.container div {
flex: 1 1 auto;
border: 1px solid #FFF;
background: #CCC;
}
<div class="container">
<div></div>
<div style="flex: 0;">
<iframe width="300" height="100"></iframe>
</div>
<div></div>
</div>
The red bar at the bottom is just a block element. You could use background images to apply the image patterns.
A few ways to do it:
Use flexbox
Use display: table;, display: table-row, display:table-cell to build a table out of divs
Use tables
I've been trying to make a group of images-list page using bootstrap but I can't make it responsive on other resolutions, The images moves left and the entire style of the arrangement will break.
<div class="fluid-container">
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
<img class="img-responsive" src="source-path">
</div>
<div>
in this one ^ The images appears in 1-row and not sided to each other, And when I use style="float: left;" it works but not responsive as I wished, Is there a better way to make a better album{images-list} using bootstrap?
Your images are responsive.
In the sense that they do scale down depending on parent size.
Here is how .img-responsive is defined in Bootstrap 3:
display: block;
max-width: 100%;
height: auto;
Please note, as Sreemat well pointed out, you do not need to wrap the images in <div>s since they already have display:block.
The problem is most people, when they say responsive they also expect it to grow in size according to the parent's width, which .img-responsive does not do, as doing that has the potential of making small images look really bad.
But if that's your desired behavior, add this to your CSS:
.img-responsive {
min-width: 100%:
}
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.
A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/