I'd like to zoom an image so that the user can scroll around it after the zoom.
The following example works well but I have to set the origin to top left as otherwise the image is cropped to the top and left. Is there anyway to scale to the centre of the image (as happens when I omit the transform-origin) but without cropping?
Please note I'm using scale because the image will have an associated image map so I can't just set the width and height.
#container {
width: 500px;
height: 500px;
overflow: auto;
}
#pic {
transform: scale(2);
transform-origin: top left;
}
<div id="container">
<img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>
This code right here, fixes is to top right, with position:absolute;
#container {
display:block;
margin:auto;
width: 500px;
height: 500px;
overflow: auto;
}
#pic {
transform: scale(2);
transform-origin: top left;
}
<div id="container">
<img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>
<div id="container">
<img id="pic" src="https://picsum.photos/id/237/500/500" >
</div>
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>
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!
Based on an existing answer, I have managed to centre crop an image. I am having trouble making the centre cropped image responsive, though.
Question
When I reduce the size of the web browser window, the centre cropped image does not scale down nicely. Instead, it maintains it's fixed height and width and spills out of the view-port. The problem is perhaps demonstrated more clearly with a Fiddle.
How can I make the centre cropped image scale down nicely? Ideally the centre cropped image will scale down nicely while still being cropped and maintaining a similar aspect ratio.
.centered-container {
max-width: 960px;
margin: auto;
}
.center-cropped-img {
width: 640px;
height: 360px;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
.center-cropped-img img {
position: absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
<div class="centered-container">
<div class="center-cropped-img">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="center-cropped-img">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
</div>
Again, here is a Fiddle that perhaps demonstrates the problem better than in prose.
Read the comments in the code for an explanation.
JSFiddle
HTML
<div class="container">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="container">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
CSS
/*some basic markup for a flexible container to crop the image*/
.container {
width: 80%;
border: 3px red double;
margin: 50px auto;
padding:0;
overflow: hidden;/*do not show image that is overflowing*/
background-color: yellow;
}
.container img {
display: block;
width: 200%;/** (1 / part of the total image width you want shown)*100% In this example you want to show 50% of the image-width**/
margin-left:-50%;/*move the image to the left, removing that content from view (and making content on the right appear). -0% will show the left side of the image. The negative value of the defined width in the rule before this one + 100% will show you the right side of the image. I guess you can figure the rest out by changing this value.*/
margin-top: -25%;/*changing the top and bottom values is a bit of a pain. After some trial and error (in google chrome) it appears they are based on the width of the image container, not the height (how unusual is that!!!). So putting -100% in this value would (re)move the image up by the px value of the width of the #container div. If you are using css sprites you should avoid setting this value other than 0%.
Alternatively do some math on the original dimensions of the image: -(vertical pixels you want off the image)/(image width)* 100% should work for pixel precision).
The good news is that the image scales with the #container div. So the image grows and shrinks with the container showing the exact same part of the image (and not showing more/less content).*/
margin-bottom:-25%;/*(re)move some of the bottom part of the image. See margin-top for more (works identical)*/
}
Use the padding hack.
U need a container, which you set to be a width in percent, height of 0 and padding on the bottom to create the aspect ratio you are looking for.
If you can set your image as a background it's even easier.
I have written a sass mixin for that, and also a small tutorial on my blog which comes with a little more extensive explanation: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html
If you need to have your image in an image tag, let me know, it's possible as well, but not as fast
Does adding this (fiddle) to .center-cropped-img achieve what you want? or do you not want to change the area that is being cropped?
max-width: 640px;
width: 100%;
Does this Fiddle do the right cropping?
With the following CSS we can maintain the aspect ratio of the container when resizing the window.
width: 640px;
max-width: 100%;
height: 0;
padding-bottom: 50%; // 320px or lower (half of the width)
The following solution uses CSS background-size property. The image is placed in the background. The <img> tag is used so that search engines can see the image.
/* responsive 40% wide, 4:3 aspect ratio container */
.centered-image {
width: 40%;
padding-top: 30%;
background-position: center center;
/* optional */
margin: 1em auto;
box-shadow: 0 0 .5em .25em black;
}
.centered-image.cropped {
background-size: cover;
}
.centered-image.scaled {
background-size: contain;
background-repeat: no-repeat;
}
/* use your favorite text hiding technique */
.centered-image img {
display: none;
}
/* miscellaneous */
body {
margin: 0;
padding: 0;
}
h1 {
width: 40%;
margin: 1em auto;
font: bold medium monospace;
}
<h1>Cropped to Fit</h1>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
<img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
<img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
<img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
<h1>Scaled to Fit</h1>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
<img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
<img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
<img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
I have tried with a script. I simply created a function and called on loading and re-sizing.
jQuery
$(document).ready(function () {
heightMan();
$(window).resize(function () {
heightMan();
});
});
function heightMan() {
var winHeight = $(window).height();
var winHeight_50 = (winHeight / 2) - 20;
var container_node = $('.center-cropped-img');
var container_height = container_node.height();
container_height = winHeight_50;
container_node.css('height', container_height);
}
CSS Changes
.center-cropped-img {
width: 64%;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
See in action.
just give width in % instead of px .
.center-cropped-img {
width: 640px;// add in %
height: auto;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
I am trying to create an image wall consisting of product photos. Unfortunately, all of them are of different height and width. How can I use css to make all images look the same size? preferably 100 x 100.
I was thinking of doing a div that has height and width of 100px and then some how filling it up. NOt sure how to do that.
How can I accomplish this?
Updated answer (No IE11 support)
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">
Original answer
.img {
float: left;
width: 100px;
height: 100px;
background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>
Simplest way - This will keep the image size as it is and fill the other area with space, this way all the images will take same specified space regardless of the image size without stretching
.img{
width:100px;
height:100px;
/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
object-fit:scale-down;
}
can i just throw in that if you distort your images too much, ie take them out of a ratio, they may not look right, - a tiny amount is fine, but one way to do this is put the images inside a 'container' and set the container to the 100 x 100, then set your image to overflow none, and set the smallest width to the maximum width of the container, this will crop a bit of your image though,
for example
<h4>Products</h4>
<ul class="products">
<li class="crop">
<img src="ipod.jpg" alt="iPod" />
</li>
</ul>
.crop {
height: 300px;
width: 400px;
overflow: hidden;
}
.crop img {
height: auto;
width: 400px;
}
This way the image will stay the size of its container, but will resize without breaking constraints
You can use the object-fit property to size the img elements:
cover stretches or shrinks the image proportionally to fill the container. The image is cropped horizontally -or- vertically if necessary.
contain stretches or shrinks the image proportionally to fit inside the container.
scale-down shrinks the image proportionally to fit inside the container.
.example {
margin: 1em 0;
text-align: center;
}
.example img {
width: 30vw;
height: 30vw;
}
.example-cover img {
object-fit: cover;
}
.example-contain img {
object-fit: contain;
}
<div class="example example-cover">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>
<div class="example example-contain">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>
In the above example: red is landscape, green is portrait and blue is square image. The checkered pattern consists of 16x16px squares.
For those using Bootstrap and not wanting to lose the responsivness just do not set the width of the container. The following code is based on gillytech post.
index.hmtl
<div id="image_preview" class="row">
<div class='crop col-xs-12 col-sm-6 col-md-6 '>
<img class="col-xs-12 col-sm-6 col-md-6"
id="preview0" src='img/preview_default.jpg'/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
more stuff
</div>
</div> <!-- end image preview -->
style.css
/*images with the same width*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: auto;
width: 100%;
}
OR style.css
/*images with the same height*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: 100%;
width: auto;
}
You can do it this way:
.container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}
img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
Set height and width parameters in CSS file
.ImageStyle{
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
}
I was looking for a solution for this same problem, to create a list of logos.
I came up with this solution that uses a bit of flexbox, which works for us since we're not worried about old browsers.
This example assumes a 100x100px box but I'm pretty sure the size could be flexible/responsive.
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 100px; height: 100px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}
ps.: you may need to add some prefixes or use autoprefixer.
Without code this is difficult to help you but here's some practical advice for you:
I suspect that your "image wall" has some sort of container with an id or class to give it styles.
eg:
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="content">
<div id="imagewall">
<img src"img.jpg">
<!-- code continues -->
Styling a size on all images for your image wall, while not affecting other images, like you logo, etc. is easy if your code is set up similar to the above.
#imagewall img {
width: 100px;
height: 100px; }
But if your images are not perfectly square they will be skewed using this method.
Based on Andi Wilkinson's answer (the second one), I improved a little, make sure the center of the image is shown (like the accepted answer did):
HTML:
<div class="crop">
<img src="img.png">
</div>
CSS:
.crop{
height: 150px;
width: 200px;
overflow: hidden;
}
.crop img{
width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-50%); /* IE 9 */
transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
.article-img img{
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
}
You will make images size same as div and you can use bootstrap grid to manipulate div size accordingly
Image size is not depend on div height and width,
use img element in css
Here is css code that help you
div img{
width: 100px;
height:100px;
}
if you want to set size by div
use this
div {
width:100px;
height:100px;
overflow:hidden;
}
by this code your image show in original size but show first 100x100px overflow will hide
Go to your CSS file and resize all your images as follows
img {
width: 100px;
height: 100px;
}
Change your image tag with this CSS style.
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:
.swiper-container {
width: 100%;
height: 300px;
color: #fff;
text-align: center;
overflow: hidden;
}
.slide{
width:100%;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
Its pretty simple. [Jump to the end of the answer for the updated Fiddle]
HTML
<div class="slide">
<span class="Centerer"></span><div class="Centered">
<img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
CSS
*
{
margin: 0;
padding:0;
}
html, body
{
height: 100%;
}
.slide
{
text-align: center;
height: 100%;
width: 100%; /*not really needed*/
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
width: 100%;
}
.Content img
{
max-width: 30%; /*so you can see the responsive alignment and size*/
}
If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.
Check out this Working Fiddle
EDIT
I didn't understood you correctly.
Check out this New Fiddle
<div class="slide">
<img src='images/test.jpg' />
<div class="title">Slide 1</div>
</div>
<style>
.slide{
width:100%;
display:table-cell;
vertical-align:middle;
height: 200px; /* you have to make height static */
}
.slide img{
width:100%;
}
</style>
Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is CHECK OUT FIDDLE:
<style>
.swiper-container {
width:100%;
}
.slide{
width:100%;
max-height: 200px;
overflow: hidden;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
<script>
$(document).ready(function(){
var imageHeight, wrapperHeight, overlap, container = $('.slide');
function centerImage(){
imageHeight = container.find('img').height();
wrapperHeight = container.height();
overlap = (wrapperHeight - imageHeight)/2;
container.find('img').css('margin-top', overlap);
}
$(window).bind("load resize", centerImage);
});
<script>
I had a very similar problem to you, also for a responsive slider component that I was building.
My requirements:
The slider container must have a 100% width against the viewport and it must have a fixed height.
The images within the slider must stretch to the full width of the slider.
The images must maintain their aspect ratio so they are not distorted.
The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.
I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2
Here is a generic form of my html, without any noise, to illustrate how to solve this problem:
<div class="container">
<img src="http://lorempixel.com/640/480/animals/1" />
</div>
And here is the minimal css required:
.container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100%;
}
You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/
It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.
You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)