I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!
Related
I have a website that contains a side bar and sometimes an image of a very large size (about 800 pixels wide) but I scripted the code so that if a screen resolution is too small, the image shrinks and scales into the small space perfectly according to multiple browsers I tested the site on. I tested the site with the demo version of sortsite by powermapper at:
http://try.powermapper.com/Demo/
It then goes on to complain that "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"
I understand that and I try to include those attributes, the image does not scale correctly.
This is the CSS I use on the image itself to scale it if I had a monitor with a max screen width of 800 pixels:
#media screen and (max-width: 600px){#X IMG{width: 100%}}
I specify 600px because I reserved 200 pixels for the sidebar.
I don't think javascript will be an answer because during the page load, the image placeholder will jump to the new size, and if I placed the code near the beginning, it will delay the the rest of the page from loading somewhat.
I was also thinking using div tags and setting the background to the image, but the problem there is that users won't be able to save it and the rest of the images on my site are part of a CSS sprite sheet.
I also am looking for a solution that will work with as many web browsers as possible even if javascript is disabled.
Any ideas for an answer?
This rule, while correct, went out the window when responsive design came into being:
Omitting IMG WIDTH or HEIGHT attributes means page text jumps about
as images load. Usability.gov 14:3
If you're always going to be using a given aspect ratio, then you can set up your code as below. If you set your width and height attributes on your img tag and you set max-width: 100% (or similar) in your CSS, as people often do when developing responsive sites, then your text will still jump around when the image loads, because it's initial height will be what you specify in your markup, and then when the image loads, the browser will maintain the aspect ratio required for max-width: 100% to work and end up shrinking the height - so that doesn't really help you adhere to your usability rule either.
.img {
background-size: cover;
background: center no-repeat;
}
.ar {
height:0;
padding: 0 0 56.25% /* 16:9 aspect ratio */
}
<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
<div class="ar"></div>
</div>
Try setting the width and height and then just adjusting width and height with your media queries (rather than max-width and percent width). You shouldn't encounter any scaling problems then.
#media screen and (max-width: 600px){#X IMG{width: 100%}}
This means that IMG will have full width of it's first parent. That parent might not be X element. Are you sure you want that?
Example:
<div id='X'>
<div><div><div><div>
<img src=''>
</div></div></div></div>
</div>
If you are trying to fix x:y img ratio that put height:auto; after width:100%;
Calculate width or height and always use auto for other property to preserve image scaling.
This is the generated html
<div id="largephoto" style="background-image: url(http://somepath/images/sample.jpg);">
and here is my js call
$('#loader').css('background-image','url("images/sample/gif" )');
I want the image to be like in facebook, regard too small or too large the user uploaded photo, the frame should show the center of the photo and leave no white space within the frame.
I tried $('#largephoto').css('background-image-position','center');
but it seem do nothing
Use css background-size property for fixing the image in DIV
$('#largephoto').css('background-size','100%,100%');
Try this CSS :-
.img_class {
max-width: 100%;
}
This will adjust image sucha a way that image will be cover its container.
#largephoto {
background-size:cover;
}
Let's say my site is arranged like this in terms of layers.
Background Image ( background-size:cover;)
500 x 500 div with a semi-transparent white background.
Content within the div.
What I'd like is that the area under the div (on the background image) to be be blurred. My problem is that with varying screen sizes, I can't have the background image "pre-blurred" because that div will not always be aligned with the background.
So my question is, is it possible to blur a specific portion of a background image on the fly by maybe defining the region like I would for the div? For example position:absolute; top:45% right:0; Or what's my best cross-browser options. CSS or other wise, it doesn't matter.
Thanks
On a side note I've thought about having a div inbetween the background and the previously talked about div with a background image the same as the one behind it but set it's background position to match the foreground div and just blur it. Kinda like zooming into a photo in programs like ps and the box in the navigator refers to only that part of the image being showed.
This may be a little heavy for what you're trying to do, but you could use Blur.js
$('.target').blurjs({
source: 'body',
radius: 10,
});
Should you need to blur more than just the background, checkout:
https://stackoverflow.com/a/17134789/1947286
You can overlay one picture with another (using divs) and blur the overlay.
<div style="position: relative; background: URL(...)">
<div style="position: absolute; background: URL(...);
top: ...; left: ...; width: ...; height: ...; filter: blur(3px)">
Update: Here it is in perfection: http://css-tricks.com/blurry-background-effect/
I have a banner that uses an image as the background. The image's size is 670*303. Is there a way to stretch the banner(image) to full width of the screen.
Demo is at http://jsfiddle.net/zhshqzyc/xGQtF/2/
And also, there is extra color(background-color: #808000)
below the banner, how to remove it?
Thanks.
background-size: 100% should do the trick.
Here, http://jsfiddle.net/xGQtF/6/
If its a gradient or pattern that can be repeated you can use
background-repeat:repeat-x;
or just insert 'repeat-x' into your background css like
background:url(images/blah.jpeg) repeat-x;
That way you only need a small chunk of the image>smaller image sizes>quicker loading time.
to get rid of the color it is showing with the image you can use
background-color:transparent;
Also if, as I suspect, you wish to make the banner stretch seamlessly from one side to the other, be sure to set the body style with
padding:0px;
width:100%;
and use
margin:0px;
width:100%;
on the div containing the background.
Although it may stretch to the full width without setting the body padding to 0px, some browsers automatically give the body padding if it isn't set so it will counteract those that do.
If you're using an image that has curved edges and vertices etc this won't be right for you, you just want to stretch it (which personally I think wont look nice on 99% of detailed images) you can use:
background-size:100%;
Hope I've helped =)
I am using image slider specified at: here
My images are of different sizes and I want to set the width and height of the image using following code:
<img src='77.png' width="20px" height="20px" />
But this doesnt work.
I am preety new to javascript, any help will be greatly approciated!
I really don't think this code can handle it (perhaps with a very serious overhaul of the javascript). I set up a fiddle here: http://jsfiddle.net/JLjCP/9/ and in examining what it is doing, it simply does not care what size the image itself is nor does it care if you have resized the image explicitly through the width and height properties. It is only taking the referenced image file and using it as a repositioned background image for the split components which are purely sized by the width and height of the display and the number of sections you tell it to do it in.
So the short answer is this code will not do what you want it to do.
put this in your css :
.cs-coin-slider
{
/*i think the class name is depend on what you set*/
-o-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-khtml-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
}
if you insist to use this coin-slider, no matter you set the size in html or set the css width+height of the image, it wont resized because this plugin treats the image as background..and that css3 background resize that is the only way that save you :)
The documentation on that page says that you can pass size options to the constructor:
$('#coin-slider').coinslider({ width: 20, height: 20 });
If you have different sized images in the same slideshow and you want to change the slider's size dynamically, it might not be possible. Use same sized images or tweak the CSS so that you get black bars around smaller images or something to that effect.
Please post your complete HTML/JS source code, the image size shouldn't matter as long as they are the same height/width as the container of the slideshow. Chances are you are possibly calling the plugin in the wrong way in your JS.