CSS image resize percentage of itself?
I have 2 methods for you.
Method 1. demo on jsFiddle
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
html:
<img class="fake" src="example.png" />
css:
img {
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
/* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
Browser support note: browsers statistics showed inline in css
.
Method 2. demo on jsFiddle
html:
<div id="wrap">
<img class="fake" src="example.png" />
<div id="img_wrap">
<img class="normal" src="example.png" />
</div>
</div>
css:
#wrap {
overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}
Note: img.normal
and img.fake
is the same image.
Browser support note: This method will work in all browsers, because all browsers support css
properties used in method.
The method works in this way:
#wrap
and#wrap img.fake
have flow#wrap
hasoverflow: hidden
so that its dimensions are identical to inner image (img.fake
)img.fake
is the only element inside#wrap
withoutabsolute
positioning so that it doesn't break the second step#img_wrap
hasabsolute
positioning inside#wrap
and extends in size to the entire element (#wrap
)- The result of the fourth step is that
#img_wrap
has the same dimensions as the image. - By setting
width: 50%
onimg.normal
, its size is50%
of#img_wrap
, and therefore50%
of the original image size.
CSS image in percentage sized container
Here is my solution : https://codepen.io/Woralie/pen/dyZvzRP
You'll need to add a container for each logo image.
.card-logo {
position: absolute;
display: block;
max-width: 50%;
max-height: 100%;
margin-top: 0.75rem;
padding: 0.75rem;
background-color: white;
}
.card-logo-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: -25%;
margin-bottom: 0.75rem;
padding: 25%;
min-width: 100%;
}
The trick is to make the container position: relative
with padding: 25%
and the image position: absolute
with max-width: 50%
. The container's top and bottom paddings take 2*25% of the total width, so when its height is 0, the image's height at max-height: 100%
takes a maximum of 50% of the container's total width.
Scale HTML image width and height in %
Yes, there is a way to maintain the image's aspect ratio and resize the image to a fraction of its original size. However, CSS cannot know the intrinsic size (the original size) of the image. Therefore, you can only do two things:
- Tell the CSS explicitly the original size
- Use JS to get the original size upon image load
What doesn't work
Using percentage value as the width
value for img
doesn't work simply because percentage value resolves to, well, a percentage of its container size, not its original size. Below, I demonstrated the not-working examples.
That being said, I personally usually want to specify the width of the image explicitly. For example, on large devices, I want the image to be 1080px. On smaller devices, I want the image to be 560px. I can simply make a container for the image of an explicit size, place the image inside the container, and specify the image's width to 100% (of its container size).
What works
As mentioned, there are two ways to make an image 50% of its original width. First, using JS. Second, tell the CSS explicitly the original image width.
- Using the JS approach, you simply need to change the width of the image. Upon load, get the intrinsic width of the image, then set the new width to the intrinsic width divided by 2. Simple.
- Using the telling-CSS-explicitly approach is less advantageous. This solution presumes that the image will always be the same and needs you, the developer, to know the original image size beforehand. When you change the original image size, you will also need to update your code. That being said, you can achieve this by specifying a CSS custom property inside the CSS class, specifying an attribute (in HTML) that gives the intrinsic width then using attr() (still experimental and mostly not supported), or using an
intrinsicsize
attribute and set thewidth
andstyle
through CSS (still experimental and not supported). The last two solutions, as mentioned, are not supported by most browsers and may not work properly yet.
In my opinion, your best bet to set an image's width to 50% its intrinsic width is by using JS. Here's a solution demonstrating the what-doesn't-work solutions and the JS solution. Aspect ratio is automatically maintained if you only change one of the image's size (width/height).
const imageJS = document.querySelector('.image--changed-with-js')
imageJS.onload = () => { const intrinsicWidth = imageJS.width imageJS.width = imageJS.width / 2}
* { box-sizing: border-box;}
body,html { margin: 0px;}
img { margin: 20px 0;}
/* Image has its intrinsic size (i.e. the original image size) */.image--original { width: auto;}
/* Image contained within a 500px container Image has a width of 50% of 500px = 250px */.container { width: 500px;}
.image--changed-with-container { width: 50%;}
/* Image is not contained within a divHowever, image is inside body<body> is its containerIt now has a width of 50% of the bodyNOT 50% of its intrinsic width */.image--changed-without-container { width: 50%;}
/* Image changed using JSYou can get the intrinsic size through JS and modify its size there */.image--changed-with-js {}
<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<div class="container"> <img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"></div>
<img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
Changing image sizes proportionally using CSS
This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.
The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.
If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto
at the height will make the image have the height proportional to the new width.
Example:
HTML:
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
.container {
width: 200px;
height: 120px;
}
/* Resize images */
.container img {
width: 100%;
height: auto;
}
how to scale img by percentage of self and not percentage of its container
I ended up solving it like this (with javascript/jQuery):
-Create a div
-Insert the image
-pick up the dimension from the image
-set those dimensions to the DIV
-set image dimensions to 100%
That way the image till initially be of original size, my jQuery resize() on the DIV will work and the image will always fill the DIV.
CSS force image resize and keep aspect ratio
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto;}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
How do I make an image resize inside a div that is resizing to a percentage of a parent div?
Change your css selector from #image
to #image img
Example: http://jsfiddle.net/justincook/XFV5N/
The problem was that you were resizing the div around the image, not the image itself. By updating your CSS to style the img
tag you solve the issue.
To set div's next to eachother, you can set them each as display:inline; width:50%
or float:left; width:50%
Read more about float/inline: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Display image at 50% of its native size
It's somewhat weird, but it seems that Webkit, at least in newest stable version of Chrome, supports Microsoft's zoom
property. The good news is that its behaviour is closer to what you want.
Unfortunately DOM clientWidth
and similar properties still return the original values as if the image was not resized.
// hack: wait a moment for img to loadsetTimeout(function() { var img = document.getElementsByTagName("img")[0]; document.getElementById("c").innerHTML = "clientWidth, clientHeight = " + img.clientWidth + ", " + img.clientHeight;}, 1000);
img { zoom: 50%;}/* -- not important below -- */#t { width: 400px; height: 300px; background-color: #F88;}#s { width: 200px; height: 150px; background-color: #8F8;}
Related Topics
Retrieve Image from Ftp to Webpage
How Does One Use the Onerror Attribute of an Img Element
Audio Tag Autoplay Not Working in Mobile
Which Elements Support the ::Before and ::After Pseudo-Elements
How to Scale a Stubborn Svg Embedded with the <Object> Tag
Which Is More Correct: <H1><A>...</A></H1> or <A><H1>...</H1></A>
HTML Class Attribute with Spaces, It Is a W3C Valid Class
What Is the Standard Naming Convention for HTML/CSS Ids and Classes
Using Thymeleaf When the Value Is Null
Make Row Stretch Across All Columns in CSS Grid
Why Should I Not Use HTML Frames
Remove Blur Effect on Child Element
How to Add a Font Awesome Icon to Input Field
Including External HTML File to Another HTML File
Google Bot Crawling on Angularjs Site with HTML5 Mode Routes