When download the image file in IPAD mini device,imagenotsho

I have the below code to download the file

byte[] byteInfo = System.IO.File.ReadAllBytes(Path.Combine(System.Web.HttpContext.Current.Server.MapPath(args.Path), args.Names[0])); Response.Clear(); Response.BufferOutput = true; Response.ContentType = MimeMapping.GetMimeMapping(Path.Combine(args.Path, args.Names[0])); Response.AddHeader("Content-Disposition", "attachment; filename= " + args.Names[0]); Response.BinaryWrite(byteInfo);

It works well on Windows and MAC devices. But on IPAD mini, it open the image in encoded format like below

IHDR         o³oa   sRGB ®Îé ïiTXtXML:com.adobe.xmp     <x:xm

background: url("background1.png");
background-size: auto 749px; /* or cover */

There's a problem with your CSS rule:

Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.

What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.

To get it to work in shorthand notation it has to look like this:

background: url([URL]) 0 0 / auto 749px;

Also note that there's a value called cover, which may be suitable and more flexible here:

background: url([URL]) 0 0 / cover;

The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:

background: url("background1.png");
background-size: auto 749px; /* or cover */
1. Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
3. CSS
5. section {
6. width: 200px;
7. height: 100px;
8. border: 1px solid grey;
9. }
11. #section1 {
12. background: url(http://placehold.it/350x150) auto 100px;
13. }
15. #section2 {
16. background: url(http://placehold.it/350x150) 0 0 / auto 100px;
17. }
19. #section3 {
20. background: url(http://placehold.it/350x150) 0 0 / cover;
21. }
23. #section4 {
24. background: url(http://placehold.it/350x150) 0 0;
25. background-size: cover;
26. }

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Mukil Vendhan9y ago
background: url("background1.png");
background-size: auto 749px; /* or cover */
There's a problem with your CSS rule:

Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.
What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.

To get it to work in shorthand notation it has to look like this:
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
background: url([URL]) 0 0 / cover;
The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.

CSS

section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}