CSS3: resize property to an image - css

if it possible to resize an image, using the CSS3 resize property? I noticed it is for block elements, but is there any workaround or possible solution?
I know I might use the jQuery UI resizable plugin but I would like to apply this CSS3 technique.
Thanks

I don't believe you can use CSS3 resize on images. The documentation states:
Note: The resize property applies to elements whose computed overflow
value is something other than "visible".
You can however, place an image inside of a div that is made the same size as your image and apply the CSS3 resize to that.
<div style="height: 41px; width:114px; resize:both; overflow:hidden;">
<img style="width: 100%; height: 100%;" src="http://www.google.com/logos/2011/curie11-sr.png">
</div>

Related

CSS Div and image max-width

I want to make an image fit a div whilst maintaining its aspect ratio. I have seen other posts where it is mentioned to use max-width:100%;.
when the image is smaller than the div, it works fine, the image is kept to a size within the div. But when the image is larger, it simply gets out of the div.
<img src="testimg.jpg" style="max-width:100%;max-height:100%;"/>
But when i use this code:
<img src="testimg.jpg" width=540px/>
The large image is resized to fit the div but does not maintain its aspect ratio.
Can any one advise on the above issue please?
This should mantain the aspect ratio:
<img src="testimg.jpg" style="max-width:100%; max-height:auto;"/>
I do not recomend using inline CSS, instead separate it:
CSS:
img{
max-width:100%;
max-height:auto;
}
HTML:
<img src="testimg.jpg" />
For the second part of your code, the width attribute represents the exact width of your image, not the maximum width. And in HTML5, the value must in pixels but without px suffix:
<img src="testimg.jpg" width="540" />
Again this is not a good practice, always use CSS to manipulate the HTML elements.
max-width:100% works only if the img tag has not width and height attributes, because they prevail on max-width. So please try to remove the width="540"
Please try the following CSS
div{ovwerflow:none;}
img{width:100%; max-height

CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

http://jsfiddle.net/gvBM8/
Whenever you scroll over an image and it grows to the desired effect there is a white border that grows along the bottom as well. Is there anyway to stop this from happening?
Also, I am new to using CSS3 across multiple browsers, how would I set it up to be moz/IE compatible?
Thank you
HTML
<div class="col4 grow"> <img src="http://www.placecage.com/200/300" width="100%">
Apply img this css property:
img {
display: block;
}
Instead of giving to the tag, add a class to those img elements. that would be better.
Working Fiddle

how to have HTML text over image, or make background image responsive

I have a problem.
I am creating a responsive header image, that would scale down to mobile and take the full width of the screen.
I would like to have done this with the img tag, and then applied a max-width of 100% but I wanted to include some text on top of this image, so chose to use a background image instead. I don't want to absolute the text over the images as this causes problems in mobile.
Also, regarding background image, I can't use background-size as this is not supported in ie8.
Is there any other way I can achieve having text over an image, where the image takes full width of the container, and full height of the image?
<div id="container" style="height: 100px; width:100px; display:block;">
<img src="some-img.jpg" style="display:block;"/>
<span style="position:absolute;">Text over image</span>
</div>
Essentially you just need to position the text over the image, within a parent.
z-index property is useful for "stacking" elements visually if you have several competing elements.

Image does not scale properly in Phonegap, jQuery mobile application

I'm creating an iPhone app using PhoneGap and jQuery mobile. I'm using a simple image tag and set the width to 100% and height to auto, but the image is not scaling properly and gets cut off. I have also tried using max-width with the same outcome. Any idea how I can solve this?
<div data-role="page">
<img class="banner" src="..." style="width: 100%; height: auto;">
</div>
I have even tried this:
$('img.banner').each(function(){
$(this).width($(window).width());
});
Previously i have gone through same problem. I tried min-height. And why both maximum-scale=1, minimum-scale=1? Try minimum-scale=1. Just give a try
I'm assuming that your image is actually nested in a div with a data-role="content" and your problem is that class ui-content by default has a 15px padding.
The simplest way to correct that would be to simply override the CSS for that page to get rid of that padding, if you need it for other elements then just wrap them in a div and add padding to those divs.
For example
CSS
.imgContPage { padding:0px; }
Markup
<div data-role="page">
<div data-role="content" class="imgContPage">
<img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
</div>
</div>
Link to JSBin
Alternatively you can set a negative margin on your img to compensate for the padding, but then you will need to calculate the width so that it fills up to the right side.
Ok, I feel very stupid right now. I was getting that image from a JSON response that was coming from a Wordpress website. When I was parsing my JSON to get to the image, I was using the thumbnail version of the image (which in my surprise, it's not really a scaled thumbnail, it's just a cropped 150x150 square of the main image).
So I changed my reference from:
json.page.thumbnail
to
json.page.attachments[0].images.full.url
And now the image scales just fine (width: 100%, height: auto).
Thanks everyone for your helps

Ways to set up a video as a background 'image'

I need to set up a website with a video as the background.
Will I be able to use z-index to position other elements on top of the video? Is there a better alternative?
I have not tested it, but you could try to set width/height of <video> to 100% then using z-index let all the others element stay on top of it...
Edit:
for example to set video as background entire page
<body style="height: 100%;width: 100%">
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video src="" width="100%" height="100%" autoplay>
Your browser does not support the video tag.
</video>
</div>
... rest of your site
You can not apply it as a CSS background (background property). You can give the effect though using layers which is controlled via the z-index property.
If you are using flash as your video playing method no - flash is ALWAYS on top of anything regardless of z-index, But I imagine this could be done by using the new HTML5 <video> tag.
Failing that convert to a high-frame rate animated image and set as BG...

Resources