Good morning,
I have div with absolute width (500px) and auto height. I scaled an image in this div but after the scale, the div has height like before the scale.
html:
<div id="result">
<div class="scale">
<img src="https://www.imageupload.co.uk/images/2017/10/21/tuv_1-down.png">
</div>
</div>
css:
#result {
position: relative;
width: 500px;
height: auto;
overflow: auto;
background: green;
}
#result .scale {
transform:scale(0.7);
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
transform-origin: top left;
}
example
Thank you!
Related
I have 2 images that have different dimensions. I want them to align horizontally and to fill the same height.
HTML
<div class="background">
<div class="wrapper">
<div class="content">
<img src="./nat-8.jpg" alt="" />
<img src="./nat-9.jpg" alt="" />
</div>
</div>
</div>
CSS
.background {
height: 100vh;
width: 100%;
background-color: grey;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background-color: white;
}
img {
display: inline-block;
width: 35%;
}
The result I get:
As you can see the first picture has white space left on the top. How do I make it that each picture covers the whole height of parent without setting fixed height on parent?
NOTE: I know that it can be done with flex by setting 'display:flex' on content div. But how do I do it without flexbox?
I tried 'display:table-cell' on images, in one solution I found it was used to make divs fill the entire eight of their parent, but apparently it does not work on 'img' element.
You need to set the height of the parent container, then you can set the height of the image to 100% to fill the space.
You can then use object-fit:cover to keep the image ratio rather than stretching. You can also use object-position:center to keep the positioning centered also.
Not all browsers are compatible with object-fit, so I would suggest swapping out the images for divs with a background-image set.
.background {
height: 100vh;
width: 100%;
background-color: grey;
position: relative;
}
.wrapper{
height:100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background-color: white;
height:100%;
max-height:150px;
}
img {
display: inline-block;
width: 35%;
height:100%;
object-fit:cover;
object-position:center;
}
<div class="background">
<div class="wrapper">
<div class="content">
<img src="https://www.indiewire.com/wp-content/uploads/2019/06/574055-frank_ockenfels-amc.jpg" alt="" />
<img src="https://www.indiewire.com/wp-content/uploads/2019/06/574055-frank_ockenfels-amc.jpg" alt="" />
</div>
</div>
</div>
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
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>
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.