I am building a mobile app in PhoneGap using HTML5,CSS3, Javascript and Jquery-mobile.
I have an html page with an img element to display an image. The problem i am facing is that with diffrent screen size it does not display based on the screen but the actual size of the image causing images to be displayed half. Is there a way i can automate this process so that it will display based on the screen size of the device ?
<img src="img\following_followers.png" alt="" >
This SO question may be of some help.
Technically, you can't access the screen's dimensions directly from CSS, nor can an element know about its parent's absolute dimensions without the help of JavaScript. Instead you usually express an element's dimensions relative to its parent, such as
#logo {
width: 500px;
}
#logo img {
width: 33%;
}
If an image's CSS height is not explicitly set or inherited, it'll scale with the width; the reverse is also true.
You can set an image to fill its parent container using width: 100% or height: 100%, but this may cause the image to overflow the container. The properties max-width and max-height can account for this. Try:
img {
max-height: 100%;
width: 100%;
}
but be aware that most browsers by default allow a document to grow in height as necessary, so a max-height: 100% property will do very little if its parent container doesn't have some sort of restriction on its own height.
That said, Javascript can access the browser's dimensions directly with window.innerWidth and window.innerHeight. However, these properties are only set when the page initially loads, and they won't change if the browser window is resized. document.documentElement.clientWidth and document.documentElement.clientHeight are more reliable.
As always, UX libraries like jQuery and Bootstrap.js make this kind of task much easier.
Make sure that you're having the right meta tag. If not then add this
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Then in css
<img src="img\following_followers.png" alt="" style="width:100%;height:100%;" >
Use this in your style
img {
height: 100%;
width: 100%;
}
You will have to use the CSS3 #media property. This is part of what we call "responsive" design.
There are even ready-made themes available on the internet, just search up "responsive template".
You can also take a look at this link for more information.
Related
I have an img element that looks like:
<img src="header-900x600.jpg" class="header-image" alt="" width="900" height="600" style="background-color: rgb(4, 96, 247);">
With the css:
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
width: auto;
height: auto;
}
Now this is meant to force the image to resize to be max-height: 400px, or max-width: 100% whilst keeping its aspect ratio. Although when loading the image collapses into:
And after the image loaded, it pushes the text down:
I thought that since the image has the width and height inline, the browser would know it's aspect ratio already, and the image wouldn't be jumping around? Is there something I am missing?
All I want is the image element, before the image source has loaded, to be in the same aspect ratio as the image will be. Making the layout not jump around!
All major browsers are now capable of doing exactly this in their current versions.
When you specify width and height attributes in HTML on the img tag and in CSS you set a width (percentage or fixed, also max-width is valid) and height to auto (or vice versa) the browser calculates the correct size and aspect ratio out of it, until the image is loaded. When the image is loaded, it uses the dimensions of the loaded image, so these should not differ from the attributes you set, otherwise you will get a layout shift again.
Note, however, that an invalid image or an image that cannot be loaded might be treated differently than a not yet loaded image. It is not guaranteed that width and height attributes of the img are considered. (This is especially important if you want to test the behavior, you cannot simply remove the value of the src attribute, this won't get you the same result as a not yet loaded image.)
Also note that there are still issues with responsive images (picture element and srcset attribute of img element) as described in the follwing link.
A great article with more detailed info and browser support can be found here: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
Note: Simply providing width and height to your images can result in a way better result in the new Lighthouse CLS (Cumulative Layout Shift) measurement, see https://web.dev/cls/
The browser doesn't know anything about the image until it is loaded. You can't set parameters of an element that doesn't exist. Instead, simply add the image into a container with full width, like so:
<div class="container">
<img src="header-900x600.jpg" class="header-image">
</div>
.container {
display: block;
width: 100%;
}
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
}
Also what Tarik says in his answer is correct, if you are declaring auto height and width then max-height and max-width are doing nothing.
You set the width and height to auto. This means that the size will be set to the currently loaded image rather than anything to do with the max-height or max-width.
Note that this is probably a duplicate of CSS: Keep Aspect Ratio of an Element for Given Height
To be clear, when you set width and height to auto, you are overriding the other settings that you set and telling the browser to detect the size of the image. While the image is downloading, it cannot, so it behaves as you describe.
You could programmatically use javascript to set these properties after you detect that the image is done loading.
I need to make sure some images have a specific width applied (using CSS class) straight away when the browser begins render.
Currently, on networks with limited bandwidth, images show their original height and width, not applying defined CSS rules right away. Setting max-height and width did not help.
.image-container{
max-width: 100%;
height: auto;
display: block;
}
<img src='https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg' />
You have not set the width, just the max-width, so if the containing element is wider than the original image it will not change anything.
Try changing max-width: 100%; to width: 100%;
Yes, there is some solution to it.
We can make the importance low for that image while rendering so that, our initial css will not apply in faster rendering.
<img src="xyz.png" importance="low">
Second is, we are applying, the css class display:none for component, onloading.
Once our API is resolved and Loader is removed the style would be class display:block.
Make sure your hideComponent className should be in main.css.
I'm trying to build a website and I temporary images in place made in photoshop, I've re-made these images in illustrator and between chrome and firefox the images are changing sizes (being huge in firefox and small in chrome). I've exported the images to be png and I am using width and max-width on these images.
Any ideas why this is happening?
max-width can't be less than width. The most common way of using max-width is like this:
.selector {
width: 1200px;
max-width: 100%;
}
So, the width controls the actual width of the .selector but the max-width won't let the .selector to be wider than 100% of the document. Actually, the way you've written the max-width, it's overridden the width.
If you're serious about using width and also max-width, you may write it this way:
<img style="width: 45%; max-width: 45%;" src="images/animation.png">
In addition,
Inline CSS is not recommended in SEO. If you're keen about it, think it over and also add an alt to the image :-)
Good luck!
It is often said that it's best to specify image sizes in img's HTML attributes, width and height. That way the browser can reserve the space for images that haven't initially been loaded yet, so that once they do load, they don't change the page layout by making the content below them jump as they appear. (I'm sorry to say I don't know what this technique is named so I don't really know how to search for this question specifically, thus this question)
What I'm wondering is how this is solved in responsive layouts? I know on a big desktop browser my news articles' images may be 400x300 px, for example, but I can't put that into my document, as:
<img src="/thumbs/article_image_400_300.jpg" width="400" height="300"/>
Because on a smaller browser I would also like my images to be smaller. But I would still like to keep this behaviour of reserving space, if possible.
Can this be done?
Put the height and width attributes into your HTML, showing the actual size of the image file you are using.
Then add this to your CSS to allow images to scale responsively while maintaining their aspect ratio:
img {
max-width: 100%;
height: auto;
width: auto;
}
Now set your desired image width for each breakpoint in your media queries, as a percentage of the width of the parent element.
For example:
img.medium {
width: 60%;
}
img.small {
width: 30%;
}
The widths set in your CSS will override those set in the HTML.
I wrote width: 100%, but it doesn't fill all the width. What's the problem? This is the website I'm talking about can be found here.
currently, .adfon looks like this:
.adfon {
background-color: #D6ECF4;
height: 470px;
width: 100%;
display: block;
}
change the width:100%; to min-width:1100px;
To get your footer working, apply the same concept I explained and it should work.
Some parts of your body have CSS specified at a width of 1100px instead of a percentage. A percentage width references the container that it sits in. In this case, the problem area is contained directly in the body. The body's width is only the width of the window, not the width of the contents on your site, which seems to be set to a width of 1100px;
Your site is not adaptive, but you use:
<meta name="viewport" content="width=device-width, initial-scale=1">
These values for adaptive sites only. In your case better to use something like this:
<meta name="viewport" content="width=1100"/>
P.S. width: 100% with display: block do nothing in any case.