Basic Scenario:
I have an image that is 2048x1536.
I have an html file that displays this image via CSS that specifies a width of 1024 and height of 768.
I have an UIWebView that displays that html page.
Problem:
On an iOS6 device, that image is resized to fit within that 1024x768 area. On an iOS7 device, that image is cropped to only display the top left quarter of the image.
Since iOS7, Chrome, and Safari all do the cropping option, I do believe that is the correct behavior (I strongly suspect that the latest webkit was updated to match this standard behavior). However, for business reasons, I still need the resize behavior.
Question:
Is it possible to still to keep that resize behavior even on iOS7?
EDIT - Additional info based on comments:
I presented a highly simplified scenario. I can't just put the image into an image view. The feature within my app allows 3rd parties to load their HTML content into it. Also, related to that, I can NOT modify the HTML contents. Basically, all I can do is create a NSUrlRequest for that HTML content and tell the UIWebView to load it via loadRequest.
Below are the HTML snippet and CSS snippet. But please keep in mind that I can't change this. I only control the objective-c end of things.
<body >
<div id="wrapper">
</div>
</body>
#wrapper {
background-color: #FFF;
position: relative;
width: 1024px;
height: 768px;
background: #FFF url(images/bg.jpg) no-repeat top left;
background-size: contain;
overflow: hidden;}
Related
For some reason png/jpg/svg files that I put into my img tag give at some random sizes a whitespace. Here is a link with a GIF:
https://gyazo.com/0cbbe95f7c9ca4e6e504448cacd8ea2c
In the GIF im resizing the screen with Chrome its developer tools -> device toolbar. Also if I click Ipad or some other device I see a white line. Its not on all devices but only on some. If I change image or check one of my other images I have the same white line but on different devices/sizes. Why does this happen?
What I checked/tried
My image tag has the display: block;
width/height: 100%;
margin/padding: 0px; Which it could never be since the whiteline is quite random.
object-fit/background-size: cover, contain, fill, everything basicly;
overflow: hidden;
vertical align: top, bottom;
div tag around my img and div tag.
Nothing here worked.
Is it possible that Chrome its device tool thingy is just not working correcty? I have some experience with it on different projects that I had to refresh the complete toolbar or switch between device to make it look normal or to make some code I added in the tools working. In the current case it doesn't fix it but maybe there are some other known issues?
This is my code
HTML:
<img src="./images/yellow-top.png" alt="top"> <!-- Shows white space at random sizes -->
<div class="bg-yellow"> <!-- height based on its content. Around 800px in my case -->
...
</div>
<img src="./images/yellow-bottom.png" alt="bottom"> <!-- Shows white space at random sizes -->
CSS
img {
display: block;
width: 100%;
}
Why does it do this and how can I fix this?
Developer tools was zoomed in at something else then 100%. This way it shows a small whitespace below an image. Setting it back to 100% fixed it. SVG file still gives me an whitespace. This is probably something within SVG files.
I'm trying to use a canvas animation effect, it works well on firefox (desktop) but on mobile it fills like little space on top left corned of the page. On mobile chorome works well, updated my browser still not working, wonder if there is any trick making it work.
code
https://codepen.io/riazxrazor/pen/Gjomdp
here is the html file on separate server:
http://ntf.r-control.eu/canvas.html
Not posting code here, becouse it not display properly (goes out the code tag somehow)
Not able not to understand your doubt. But, you can try
canvas{
height: 100vh;
width: auto;
}
it will force your canvas to be the height and width of the viewport.
I'm working on my website, and have the main body div set to a certain width. But when I upload all my files to the web host the size of width shrinks, and no matter how I adjust the code for the div the width size stays the same(wrong size) on my published site, despite looking right when I just open the code in a browser.
I've tried Editing the code directly in the web host to see if I can even adjust the width at all. I've already tried deleting and re-uploading everything a few times.
Here's what I have on my CSS style sheet:
.body1{
max-width: 1200px;
height: 1000px;
background-color: #fffdf8;
margin: auto;
padding: 10px;
text-align: center;
border: 2px solid #f892c9;
}
<div class="body1" style="height: auto">
The width of 1200px is how big I want it to be, and it appears correctly when I open the html file in a browser. When I upload the code with a webhost the width is smaller, and even if I change it to a bigger number like 1500px it stays the small size.
EDIT: I'm publishing it with 000webhost.com. As far as I can tell there's no other CSS, only what I've uploaded for my page.
Maybe you want the atributte "width" instead of "max-width"?
max-width its usefull when you want to resize the page with a specific width.
Check the Reference CSS anyway: https://www.w3schools.com/cssref/pr_dim_width.asp
I still don't know why exactly it wouldn't work in the first place, but I finnaly decided to just cut it out of the CSS style sheet and put it with the rest of my html the old fashioned way:
Now it works.
In my project all images inside a container have the css attributes max-width: 100%; and height: auto; to scale images down when the viewport shrinks and the container shrinks.
This is working, but the price to pay is that the browser is not able to draw the page correctrly without loading the images to get the dimensions.
When I embed the image via <img width=100 height=100 /> the browser normaly reserves the space and renders the rest of the page.
As soon as the above mentioned css is applied, the site content below the image “jumps” because the image is 0x0px during load progress.
This leads me to two questions:
Is there a way to use the max-with 100/height auto technique without destroying the normal placeholder behavior?
If not, what would be a correct class declaration to apply for some of the images that should not auto-resize and loaded normally, with correct sized placeholder during load? I tried height: initial and height: inherit, in both attempts the image is still 0x0px before loaded, the html height attribute is ignored.
I created a fiddle, but the loading problem cannot be seen here due to caching; Therefore, I copied the code from https://jsfiddle.net/yrx52avq/4/ to http://www.testserver01.de/fiddle.php and added delays and no-caching options.
Reload the page: The red boxes pop out during load progress. The green ones do not.
In your css, please try the below code using the property object-fit:cover or object-fit:contain. This property will resize your image to fit in the container.
.container img {
object-fit:cover;
max-width:100%;
}
or
.container img {
object-fit: contain;
max-width:100%;
}
you can find more information on object-fit property from the w3schools
I'm making a website for my girlfriends 23rd birthday and she'll mainly be viewing on mobile. The background image is fixed (no issue on desktop) but on mobile, the image scrolls slightly on the bottom, but adjusts itself after scroll. (Video Attached: https://youtu.be/wKnxYXEy0mg)
CSS Below:
body {
background-image:url(Gold2.jpg);
display: block;
background-color: gold;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
min-height: 500px;
}
That's not the background moving, it's Chrome's address bar disappearing.
This behavior is normal, try the website on a different browser.
Have you already tried to force off this behavior by using jQuery? jQuery makes it tremendously easy to add and remove classes as well as adding css to them. You could create an if-statement that manually adds the css rule of this background to the section. Another option I'd consider is to add new classes for everything you need in this case scenario and giving everything a z-index above 1 (just to be sure everything is displayed in the chrome browsers mobile app properly). That are just guesses I would realize in your situation although I didn't know this behavior to this point. Hopefully I helped you with your problem... :^)