I'm kind of stuck when trying to use this slideshow plugin:
https://github.com/iamvery/galleriffic
I'm using this because it has page pagination.
Anyway,
the problem is the container has to be position: absolute which means I must give it a height so elements below respect its height.
The problem with this is the images. I want them to be responsive.
So basically I'd like to use max-width: 100%;.
The problem is obviously if my container is for e.g 600px high and my images are responsive then my image height will decrease under that 600px and leave white space.
I've tried having img width 100% but fixed height but then they skew as your resize the browser.
I'm not sure if there is a solution.
Any ideas?
Example here:
https://jsfiddle.net/u08vrpt2/
HTML
<body>
<div class="image">
<div class="image__item">
<img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
</div>
</div>
</body>
CSS
.image {
position: relative;
max-width: 1200px;
margin: 0 auto;
height: 500px;
background: grey;
}
.image__item {
position: absolute;
top: 0;
left: 0;
}
img {
max-width: 100%;
}
Why the container needs to be absolute?
If we remove that, you still having the same behavior
.image {
position: relative;
max-width: 1200px;
background: grey;
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
}
<div class="image">
<div class="image__item">
<img src="https://s15.postimg.org/qwsiomo97/test.jpg" alt="test image">
</div>
</div>
<p>This text respect the image height</p>
Related
I currently have a modal which i want to use as overlay over webpage.
HTML:
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="imgCon">
<img class="overlayimg" src="img/trendoverlay.png" />
<img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
body{
width:100%;
}
.imgCon{
position: absolute;
height: 100%;
width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
.overlayimg{
max-width:100%;
max-height: 100%;
height:auto;
}
However here's the problem. The first image(top one) when only image. It's perfect. It works fine.
The image that goes underneath has to stay inside the same DIV as the other image, be as wide as the upper image. But height is fixed. Is there a way to achieve this so they still scale with the padding of 51.5px left/right and 73px at bottom?
picture with more info:
Example
Fiddle:
https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8
As you can see the top image scales how I want it to scale. That it keeps it's aspect ratio but had a minimum left/right and bottom. The image underneath the one is suppose to have the same width as the top image. But the height has to be fixed at 110px. But the Div which contains the images must keep the padding at those 2 minimum at the sides and bottom.
This is going wrong:
https://imgur.com/a/ILPpO
Here the bottom image must also scale as wide as the top image. And actually they also need to stick together so it looks like 1 image instead of 2 seperate ones.
Give this a Try
CSS
body{
position: relative;
}
.wrapper{
position: relative;
}
div.image-container{
position: absolute;
margin:auto;
height: 100%;
max-width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
img{
max-width:100%;
}
HTML
<body>
<div class="wrapper">
<div class="image-container">
<img src="http://imgur.com/c7uASdV.png">
<img src="http://imgur.com/60d6BUt.png" style="height: 110px">
</div>
</div>
</body>
Link for reference
You could give a try to display:table properties to draw a cell at middle to hold and resize first image, and absolute positionning for second image :
#modal {
display: table;
height: 100vh;
width: 100vw;
padding-bottom: 73px;/* bottom limits */
box-sizing: border-box;
}
#modal:before,
#modal:after {
content: '';
padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
display: table-cell;
}
.modchild {
display: table-cell;
position: relative;
margin-bottom: 100px;/* room for img 2 */
width: 1%; /* will expand to fit image width and will stand at middle */
}
img[src*="x212"] {
height: 100vh;/* size it */
max-height: calc(100vh - 100px - 73px);/* downsize to use */
display: block;/* or reset vertical-align*/
}
img[src*="x100"] {/* size and stretch it */
margin: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
bottom: 0;
}
* {margin:0;}
<div id=modal>
<div class=modchild>
<img src="http://dummyimage.com/400x212&text=keep_ration" />
<img src="http://dummyimage.com/400x100/ff0&text=distort" />
</div>
</div>
fiddle example : https://jsfiddle.net/4n1quv9n/4/
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
In my project, there are some images. My code looks like:
<div className="col-sm-6">
<img src="xxx">
</div>
<div className="col-sm-6">
<img src="xxx">
</div>
The width of img is 100% of div, which is 50% of the whole screen. If I resize the browser, the width of image is changed. In this case, how to keep the height is still the same as width?
It depends on the aspect ratio of the image.
If you want to stretch the image to a square: since the container <div> is 50% of the whole screen. You could've written it as width: 50vw; (50% of the viewport width). The same for your image: width: 50vw; and to keep height the same as the width.:
.col-sm-6 img {
width: 50vw;
height: 50vw;
}
If the image is a square, just adjust width. Height will automatically adapt. Since you must be using Bootstrap (guessing from the class name col-sm-6).
If the image is always panoramic:
.container {
width: 50vw;
height: 50vw;
border: 1px solid lime;
overflow: hidden;
}
.container img {
height: 100%;
min-width: 100%;
}
<div class="container">
<img src="http://www.w3schools.com/css/img_lights.jpg">
</div>
Same logic above for always vertical images.
You can just set the width of the wrapper to equal width and height for this and 100% width and height for the img.
Another Option
You can also use the fact that padding is always calculated based on the width in CSS-
Position the img absolutely relative to its wrapper
Give the same value for padding-top and width (50vw each) and set height to zero for the wrapper.
Give width: 100% for the img
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align:top;
}
<div class="wrapper">
<img src="http://placehold.it/250x250">
</div>
Note that your images may stretch out if it is not a square image - you can opt according to your design to drop either of width: 100% or height: 100% so that the stretching won't happen. (or opt to use a square image of course!)
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align: top;
}
<div class="wrapper">
<img src="http://placehold.it/250x100">
</div>
Usually if the width auto then height fix hardware and vice versa, if you want auto height to auto-height of the current div
Here's the thing: I'm making a pure JavaScript full screen image slider, and I'm having a little trouble with my elements position.
The image's size needs to be dynamic, because it has to fit in every screen. I need all the elements aligned side-by-side, so I can animate the slider with a left/right effect.
Here's my issue: I can't get those elements aligned. They just stand vertically one below the other.
I really need those images with a 100% size, but that way I can't align them side-by-side. If i set a minor percentage (smaller then the parent size), or if I set a static value, they stand how I want.
What I need to do here?
You can find a live exemple here http://jsfiddle.net/9uF2b/
Here's some of my code:
<div class="wrap">
<div class="slider">
<div class="container" id="container">
<ul>
<li class="active">
<a href="/teste/">
<img src="img/1.jpg" alt="teste alt">
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.wrap {
width: 100%;
height: 100%;
}
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
// overflow: hidden;
}
img, a {
width: 100%;
height: 100%;
}
li {
display: inline;
}
ul {
margin: 0px;
padding: 0px;
}
Thanks in advance for any help you are able to provide!
Try to add white-space: nowrap; to your slider:
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
white-space: nowrap;
}
Demo: http://jsfiddle.net/9uF2b/1/
This is because you are giving 100% height and width to img in in:
img, a {
width: 100%;
height: 100%;
}
You have to give height and width 50% to img tag only as:
img{ width: 50%; height: 50%;}
So now images will add up to 100% width of parent cotainer. If you use more than 2 images then do the math accordingly.
Hope that solves your problem.
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}