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.
Related
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 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.
I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO