So, I didn't write this but now I'm trying to fix it...
I have a fixed width div which displays 5 images across it. These images are all the same size, but we want to scale them based on a css class. This is being done in drupal so actually scaling the images would be tricky and the current solution was to scale them in CSS. The problem is that when doing this, the spacing between each image is not equal.
A picture is worth a thousand words so here is a fiddle with the current implementation: http://jsfiddle.net/jCa7j/1/
And a graphical view of what I'm talking about:
So the goal here is to have this same output, but have an equal distance between each image. I've tried a lot of things and have had little luck... I've found methods for doing this with just text, or with fixed width images, but nothing that seems to do the trick here. I've also tried putting a width in pixels on .field-content and then width 100% on img so that the divs are all the same width as the scaled image but with that I still haven't been able to figure out how to get them equidistant.
I suppose doing this in javascript is an option as well. I'd prefer straight css but if it's impossible we can do it with javascript.
Any input?
Current example html:
<div id="container">
<div class="field field-1">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-2">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-3">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-4">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-5">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
And current example css:
#container {
width: 730px;
}
.field {
width: 142px;
display: inline-block;
text-align: center;
}
.field img {
height: auto;
}
.field-1 img {
width: 70%;
}
.field-2 img {
width: 93%;
}
.field-3 img {
width: 100%;
}
.field-4 img {
width: 91%;
}
.field-5 img {
width: 79%;
}
This should be what you're after:
#container {
width: 730px;
}
.field {
display: inline-block;
text-align: center;
}
.field-1 {
width: 115px;
}
.field-2 {
width: 125px;
}
.field-3 {
width: 135px;
}
.field-4 {
width: 125px;
}
.field-5 {
width: 115px;
}
.field img {
height: auto;
width: 100%;
}
I've simplified things a bit.
FIDDLE
CSS
#container {
width: 730px;
border: 0px solid black;
}
.field {
width: 142px;
float: left;
text-align: center;
margin-left: 2px;
}
Then you just play with the margin-left, container size/position, image size etc.
Related
When I try to change the height of an image's parent div dynamically, the width changes proportionally in Chrome. However, this expected behavior is not working in Safari.
HTML:
<div class="content">
<div class="imagee-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<button id="2">Increase height</button>
CSS:
div {
height: 100px;
float: left;
background: red;
}
img {
max-width: 100%;
max-height: 100%;
}
JS (to test dynamically increasing height)
$("#2").click(function() {
$("div").css("height", "+=5");
});
Here's a fiddle to play with:
http://jsfiddle.net/MNL29/53/
What am I doing wrong?
For me, it works like this:
$("#2").click(function() {
$("div").css("height", "+=5");
});
html,
body {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100px;
background: red;
}
.image-wrapper {
display: inline-block;
}
img {
max-width: 100%;
max-height: 100%;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
<br />
<button id="2">Increase height</button>
</div>
Or see in JSFiddle: http://jsfiddle.net/6e6zpetd/
Also updating to change the image size instead of the container size works. So, instead of having the image stretch to fill the div size (which the width of the div isn't changing so it makes some sense that the width of the image wouldn't change either), you can change the image size and have the div stretch to contain the image, like so:
http://jsfiddle.net/jy8xwhj3/
$("#2").click(function() {
$(".image-wrapper img").css("height", "+=5");
});
.content {
overflow: hidden;
font-size: 0;
}
.image-wrapper {
float: left;
}
img {
height: 100px;
max-width: 100%;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="2">Increase height</button>
<div class="content">
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"> </div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg">
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg">
</div>
</div>
For those who, same as me, cannot change the image height directly (as in accepted answer) and have to change the height of the container, there is a solution. Not and elegant one, but it works.
Safari actually knows how to render it correctly, it just does not "realize" when it should rerender it. After the height modification, if you change any css property that potentially can affect the element's box, it forces a render and it takes the new height into an account.
Just create a dummy class with for example max-width:100% and each time the height is updated, toggle the class on or off (easily done with jQuery .toggleClass). Content gets rerendered, everyone is happy.
If someone know the mechanism / issue behind it, I am curious.
I want to create a vertical slider using jQuery and CSS. Here is my code:
HTML & JavaScript
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
<button id="prev3">∧ Prev</button>
<button id="next3">∨ Next</button>
</div>
CSS
.slideshow {
margin: auto;
position: relative;
overflow: hidden;
height: 200px;
}
.slideshow img {
width: 100px;
height: 100px;
padding: 2px;
}
div.responsive img {
width: auto;
height: auto
}
.cycle-pager {
position: static;
margin-top: 5px
}
JSFiddle
However, it's showing only two images. I want to show 3 or four images.
I also have a CodePen, but it's showing only one slider text.
How can I change and make it 2 to 3?
If you set the height of .slideshow to 312px this should do the job.
See here.
Or even easier, set the data-cycle-carousel-visible=X to the desired amount X of pictures shown. For example data-cycle-carousel-visible=3
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}
So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?
Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.
You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>