I'm putting an img tag in a document without knowing the width/height of the corresponding image:
<img src="/myimage.png" />
I want to use CSS to scale the image to exactly half of its "native" size (the size of the underlying image). I can't figure out how to do this.
Using width: 50% would size relative to the containing block, not the image.
I can't size to a specific pixel width because I don't know the image size.
Since I only need to support WebKit, I've tried using a transform:
-webkit-transform: scale(0.5);
This adjusts the image nicely, but doesn't resize the size of the image element itself.
#Radagaisus suggests using Javascript, which is a good fallback. However this is on an ultra lightweight mobile page so I can't use jQuery, and dealing with all the onload() handlers manually would be a pain.
As a postscript: why I am doing this? Because I need to handle the Retina display. I can detect it using devicePixelRatio and fill in larger (2x) images, but I need to scale them down to 50% to look correct on the display.
The zoom property sounds as though it's perfect for Adam Ernst as it suits his target device. However, for those who need a solution to this and have to support as many devices as possible you can do the following:
<img src="..." onload="this.width/=2;this.onload=null;" />
The reason for the this.onload=null addition is to avoid older browsers that sometimes trigger the load event twice (which means you can end up with quater-sized images). If you aren't worried about that though you could write:
<img src="..." onload="this.width/=2;" />
Which is quite succinct.
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 load
setTimeout(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;
}
<img src="data:image/png;base64,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" />
<div id="s">div with explicit size for comparison 200px by 150px</div>
<div id="t">div with explicit size for comparison 400px by 300px</div>
<div id="c"></div>
The following code works for me:
.half {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
<img class="half" src="images/myimage.png">
Using the x descriptor of the srcset attribute can be a simple solution.
<!-- Original image -->
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png" />
<!-- With a 80% size reduction (1/0.8=1.25) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 1.25x" />
<!-- With a 50% size reduction (1/0.5=2) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 2x" />
Currently supported by all browsers except IE. (caniuse)
MDN documentation
Set the image to be the background of a div, then set the background size to be half the width of the image.
<div class="myimage"></div>
Then in your css, if your image is 300px x 200px:
.myimage {
background: url('images/myimage.png') no-repeat;
background-size:150px;
width:150px;
height:100px;
}
what about
max-width: 0.5em;
and then experiment with the font-size?
This should work:
img {
max-width: 50%;
height: auto;
}
Related
I am new to media queries. I have it setup to swap an image based on the portal size. That is working great with the following code:
<header>
<div class="logo_div">
<img src="images/logo_full.png" class="logo_full">
<img src="images/logo_small.png" class="logo_small">
</div>
</header>
/* Logo DIV */
.logo_div {
margin: auto;
width: 50%;
}
/* Logo */
.logo_small {
display: none;
}
#media (min-width: 1200px) {
.logo_full {
display: block;
text-align: center;
}
.logo_small {
display: none;
}
}
My large logo is centered just fine. My small logo however sits to the right. I have tested this by simply changing the browser window size as well as on my iPhone XSM. On my phone, it is obvious that the small logo is to the far right.
Am I missing something here?
You can see this live also by going to http://thelavender.net/_fades/
For me the best way to center any object is:
#myobjectid{
display:table;
margin:0 auto;
}
In your case put it to your div container, and remove width.
Inside your image, put your width tag.
I want to add that you're making two http requests, for both the large and small logos, when you really need only one. Have you considered using picture?
The HTML <picture> element contains zero or more <source> elements and
one <img> element to provide versions of an image for different
display/device scenarios. The browser will consider each child
<source> element and choose the best match among them; if no matches
are found, the URL of the <img> element's src attribute is selected.
The selected image is then presented in the space occupied by the
<img> element.
This following snippet will produce only one logo at a time and shrink your CSS significantly.
<picture>
<source srcset="logo_full.png" media="(min-width: 1200px)" />
<source srcset="logo_small.png" />
<img srcset="logo_full.png" alt="My default image" />
</picture>
In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari
Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari
I just need the OR image to stay in the same spot no matter what browser or window size is used
here is the code that Im currently using
<div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px">
<img src="http://173.83.251.7/~iworeitb/wp-content/uploads/2013/06/or.png" alt="" />
</div>
Just tried option 2
I changed the code to as follows still no luck on a good position any other suggestions?
<div id = 'O' style="z-index:10; position:absolute; margin-top:20%; margin-left:18%">
<img name="" src="http://shopiworeitbe.../2013/08/or.png" alt="" /></div>
#O{
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
http://tinyurl.com/mvkkcfg
Still not accurate
Please help thanks
You will have better luck using pixels or ems as opposed to percentages.
Percentages are dynamic and depend on the viewport whereas pixels and ems are static values and will deliver desired results.
The bounding box is approx 1000x600, and some images are 500x100,
while some others are 400x100 (extreme examples). Now I'd like to
scale both up to the maximum size the bounding box is capable to
handle, but keep them to scale.
img {
width: 100%;
height: 100%;
}
Won't keep the image to scale.
You can set only width or only height to 100%. E.g.
img {
width: 100%;
}
or
img {
height: 100%;
}
That will preserve the image scale, but the image might overflow the container.
This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.
I was having difficulty with this until I read this thread (resize view width, preserve image aspect ratio with CSS), and the List Apart article (http://alistapart.com/article/fluid-images) and put it all together.
If your markup is like this...
<img src="myImg.jpg" />
...then simply stating
img {
width:100%
}
should be enough because most modern browsers realise that most people, given a choice, don't want to change the aspect of their images. However, if your markup contains dimension attributes like...
<img src="myImg.jpg" width="400" height="400" />
...which, is meant to be better technique, then the markup will shine through the CSS keeping the image at fixed height but flexible width (urgh!) unless you tell it otherwise with something like...
img {
width:100%;
height:inherit;
}
...or...
img {
width:100%;
height:auto;
}
Both seem to work and force the image back into correct aspect.
I've just stumbled upon this problem myself (my WYSIWIG editor adds dims to images by default - I needed a simple solution or I needed to spend hours hacking JCE to stop this behaviour) and haven't yet tested it exhaustively but it should give you a good starting point if you're having the same issue as me.
I don't know if there is a way to do this with just CSS. If you want to achieve something like this then you can use supersized
Alternatively, if you don't care about older browsers, you can look into the CSS3 background-size property. Specifically, I think that setting background-size: cover will do the trick.
Edit - I misunderstood. What you might actually want is background-size: contain, but the downside is that you probably will have to change your html markup, not just your css.
I think this A List Apart article may help you greatly, it discusses responsive images that adapt to their container, maintaining aspect ratio.
Essentially you just need to contain the <img> and specify dimensions for that container than apply max-width:100% to the <img> and it will adapt. Read the rest of the article for obligitary IE considerations (thankfully IE7+ supports it).
Setting only width or height doesn't always work, so alternatively you can set:
img {
max-width: 100%;
max-height: 100%;
}
BUT
it will not extend images over their original size
You can't do it like that. You can edit the image element's width and height attributes...
<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" />
<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />
<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" />
You can set the width and height to either pixels or percent. Note that you don't have to write px when using pixels, but you do have to write % when doing percentage. So you can do something like...
<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />
... but that will take 100% of the width and height of the parent element. So be sure you know what the parent element is and its dimensions.
An update to this in 2020. The css property object-fit can be used to display an image at 100% width and height without distorting it.
.wrapper {
height: 100px;
width: 100px;
border: 1px solid;
}
img {
width: 100%;
height: 100%;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
<div class="wrapper">
<img src="https://i.stack.imgur.com/6c39r.jpg" />
</div>
↑ default, bad aspect ratio
<div class="wrapper">
<img src="https://i.stack.imgur.com/6c39r.jpg" class="contain" />
</div>
↑ <code>object-fit: contain;</code>
<div class="wrapper">
<img src="https://i.stack.imgur.com/6c39r.jpg" class="cover" />
</div>
↑ <code>object-fit: cover;</code>
I understand that different browsers are likely to have different ceiling values, but what is a good rule of thumb for the maximum render-able CSS height/width in a given browser?
For example, this trick:
.parent{
overflow: hidden;
}
.column{
float: left;
}
.max-height{
margin-bottom: -30000px;
padding-bottom: 30000px;
}
<div class="parent">
<div class="column">
</div>
<!-- given a background color, this div will appear to expand to 100% the
parent height -->
<div class="column max-height">
</div>
</div>
I know it's nearly stupid, but if a page were to expand beyond 30000px, now the trick doesn't work.
I've seen 32768px used in various places; is this due to higher values being unreliable, or just because its a nice square number?
I'd be tempted to have a look at what values can be returned from javascript in the screen object available height
<script type="text/javascript">
document.write("Available Height: " + screen.availHeight);
document.write("Available Width: " + screen.availWidth);
</script>
Using jquery you could set the body height and width to these values using the .css function if you pass them in as variables such as.
var screenHeight = screen.availHeight
of course this assumes if javascript is enabled on the clients browser
I want to place a transparent .png image exactly over another image, lets say .jpeg
Here is my code:
<img src='someimage.jpg' width='480px' height='360px' />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />
It works fine in Chrome,Safari and maybe new versions of Firefox. In older versions of Firefox, and in all versions of IE it won't work - instead the transparent image is shown to the right, above the .jpeg image.
Can anybody give me a fix to this?
Here's a much easier way to ensure the images are on top of each other:
<div id="image-combo">
<img src="someimage.jpg" style="width: 480px; height: 360px" />
<img src="someother.png" style="width: 480px; height: 360px" />
</div>
And here's the CSS:
#image-combo {
position: relative;
width: 480px;
height: 360px;
}
#image-combo img {
position: absolute;
top: 0;
left: 0;
}
I do not believe this is a browser issue. This is a window size issue...
You really have two 480 pixel images next to each other so it depends on how wide you have your browser window.
If your window is less than 960 pixels wide, your code works because the second image wraps to the line under the first image.
If the window is more than 960 pixels wides, your code will not work and fails as you describe because the second images simply sits to the right of the first. Your code moves the second image up so the second one will be on the right and the negative margin moves it up the exact height of the first image.
A quick fix would be to insert a line-break <br /> between the two images to insure the second image is always below the first image. Also there is not supposed to be "px" in the img properties of width and height, so remove those.
<img src='someimage.jpg' width='480' height='360' /><br />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />
There are probably more elegant solutions out there, like using container <div>'s, but without seeing the context of the rest of your code, it's impossible to say what would be best.