I'm admittedly not a fan of CSS and I hate even more responsive layouts but I'm creating an UI with Bootstrap (version 4, for what matters) in which I have some absolutely positioned elements that aren't exactly perfectly aligned as I want, be it in different native resolutions (monitor or VGA-defined) or when simply resizing the viewport (i.e.Ctrl++).
Since I began to create this UI I'm using vh and vw units for most elements (except those related to Bootstrap Grid, of course) thinking I wouldn't have such problem and this decision worked quite well for most of scenarios.
However, until now, I was using an old and very small monitor (1366x768) and recently I (finally) acquired a 21.5" monitor (FullHD, if this matters) and these values I've defined in my CSS rules, after exhaustive testings, are now slightly mispositioned, a bit to the left or to the top. For example:
This is a UUID I use for Unique User Identification in the Application and its positioning and text sizing was defined according to the rules below:
#user-identification {
bottom: 2.05vh;
font-size: 0.64vw;
height: 4vh;
left: 3.05vw;
width: 15vw;
}
As you may have noticed, the blueish background is in fact an image and the text is absolutely positioned on top of it, so I can reuse it for different use cases.
These rules created while developing in the small monitor where enough to center the text in the box of this background image. But now, in the bigger monitor I took this screenshot, you can see that the text is aligned to the left. It may be difficult to notice, I know, but this is a crop of the bigger picture which, unfortunately, I cannot show more :(
Well, I was about to start fixing all issues based on the big screen, for example, by changing the left to 3.4vw instead, but then I realized that if for any reason someone accessing the website is under the same situation I was before, the user experience would be prejudiced.
The first solution that came to me was to use Media Queries but I don't know the values I should be using to create the rules.
Worse! Regarding the viewport resizing, Firefox goes 10% by 10% while Chrome has a wider range (25%, 33%, 50% 67%...) and other browsers may have other values. And because I'm not a specialist I don't know the values I'm looking for to create the rules.
Can anyone help me?
Although it would be awesome, it's not my intention to fit the whole UI in the viewport of, for example, an iPhone 5 (the smallest I've found on Chrome Developer Tool with 568x320). I just don't want these small icons and texts absolutely positioned to be out of place.
[EDIT]
Describe the scenario in a Fiddle proved harder than I thought, that's why I tried to avoid it. But as asked, in this one I've positioned as best as I could and it looked good in the default preview area. But just by resizing it text already goes way out of positioning.
So I made this one, specifically for the embedded version. I believe it would be better as it's close to have the editor in one window and the preview in another (browser).
However, neither of them truly reflects what I really have. although the markup is compatible, both <img> and <span> inside the <figure>, I don't have these drastic changes when resizing the viewport. I have only small mispositionings on bottom and left.
I'm probably not extracting everything I should. I've got most of the Grid where this image (or the bigger, complete version of it) is located. .box is not relevant as it's just a few lines with linear and radial gradients and some box-shadow.
The whole UI is complex and I may have left something out of these Fiddles, but at least is something visual that shows positioning going wild when resizing (and definitely in different resolutions). My apologies for that.
This is the root of the problem to my understanding. There is an increase in height of the <span> element tied to the height of viewport, so the text container which is the <span> element is increased in height at the same time that the position of it via bottom and left are adjusted using viewport width/height. Removing the height setting of your elements in css, might solve the issues that you are having. Please leave a comment below, if this is not the solution to your question, and we can work together to the solution that fits this case. Thank you.
html, body {
font-size: 1rem;
height: 100%;
}
figure {
display: flex;
position: relative;
z-index: 1;
}
img {
height: 100%;
}
span {
bottom: 3.5vh;
color: #FFF;
font-size: 1.9vw;
/* height: 4vh; No need for this line right here. */
left: 1.1vw;
position: absolute;
text-shadow: 2px 2px 0px rgba( 0, 0, 0, 0.5 );
text-transform: uppercase;
width: 37vw;
z-index: 2;
}
<figure>
<img src="http://nick.mtvnimages.com/nick/promos-thumbs/videos/spongebob-squarepants/rainbow-meme-video/spongebob-rainbow-meme-video-16x9.jpg?quality=0.60" />
<span>f51bbe1e-7445-4545-bb84-15e614a119a2</span>
</figure>
Related
We're having a problem when an image (logo) is resized in WebKit, it is jagged for a couple of seconds. We've tried resizing it both by changing width in CSS and using scale transformation. Is there any way to fix this?
http://codepen.io/Znarkus/pen/xbxKLK
Example HTML:
<div>
<img src="http://i.imgur.com/LoN4Mnz.png">
</div>
CSS:
div {
width: 300px;
height: 100px;
background: #ddd;
}
img {
max-width: 100%;
}
div:hover img {
width: 200px;
}
It seems to be a problem with the antialiasing of the images which has a short delay. My searches did not yield any good answers on how to solve this, so I've come up with two possible solutions.
Solution 1
Keep two versions of the image pre-rendered, then switch between the different sizes.
Pros: Perfect rendering
Cons: Takes more memory
Solution 2
User the image-rendering CSS property to disable antialiasing. By adding image-rendering: [browser specific see codepen fork]; to the div, you can see that the rendering of the image isn't as good as without antialiasing.
Pros: All CSS, no extra memory consumption
Cons: Lesser image quality
http://codepen.io/anon/pen/XJWrvJ
EDIT: Solution 3
On second though, there might be a different solution. Images aren't particulary great for rendering text, but since it's a logo I'm guessing you have some kind of special twist on the text or styling. If you can export the logo as svg and render it in a canvas you might be able to get around these problems.
I'd like to receive a solid answer about this scenario.
CSS
article {
overflow: hidden;
display: inline-block;
border: 1px solid;
}
img {
max-width: 40%;
max-height: 65%;
}
HTML
<article>
<img src="http://placehold.it/200x800">
</article>
<article>
<img src="http://placehold.it/800x800">
</article>
What happens:
The images become relative to their own container, which is sized after them, so they seem to become relative to themselves.
Is this documented? What decides which property leads? Why does the effect stop on the first round and doesn't repeat until their size is 0? Lastly: any useful way to use this effect?
http://jsfiddle.net/frapporti/9kgBP/
You did not set any size on your article element. Therefore, it takes its size from its own content - an image element. You also set no size in the image element, which is a good practice. For this reason a browser does not know which size to set until the image renders.
In effect, you forced browsers to guess. Not surprisingly, they all guess in their own way. Open the same fiddle in different browsers and see that they render this setup differently. If you set size attributes on your image elements, the rendering will be totally different. If you set sizes on article elements, the rendering will be different again.
The bottom line: don't try to confuse browsers - the result is unpredictable.
And if you like self-reference as a concept, enjoy Godel, Escher, Bach: An Eternal Golden Braid by Douglas Hofstadter. This is one of my favorite books.
Let's say hypothetically you have 5 divs. One is a container and the other four are children. You've set each one to be 25% of the container and you've given each one a background separate from the container background.
When you resize the browser your 4 divs at some point in time do not go all the way across, they might be a couple pixels off. Is there a way to stop this form happening? I'm assuming it's happening because it's 'snapping to each pixel' therefore leaving a small gap when resizing the browser.
#container {
width: 100%;
background: #000;
}
.children {
width: 25%;
float: left;
background: #fff;
}
JSFiddle: http://jsfiddle.net/AEvUL/
Screenshot of JSFiddle page in safari: http://cl.ly/image/1o1O2O401E0f
John Resig has a post about this issue that uses this exact case as its example.
http://ejohn.org/blog/sub-pixel-problems-in-css/
Take the following page for example. You have 4 floated divs, each
with a width of 25%, contained within a parent div of width 50px.
Here’s the question: How wide are each of the divs?
The problem lies in the fact that each div should be, approximately,
12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the
number. The problem then becomes: Which way do you round the number?
Up, down, or a mixture of the two? I think the results will surprise
you, as they did me.
There are also several Stack Overflow questions on the subject:
safari rounding down on subpixel calculations
percent (%) width rendered differently in different browser (firefox, safari, opera, chrome)
I recall it was long ago best practice to hardcode width and height for any image (generally so it allocated appropriate amount of space while loading), but now with most people on high speed and things generally more dynamic, what is the best practice for this? Is it still preferred that any content image have inline size set with html?
It doesn't matter if you set the size using HTML attributes or in a stylesheet, but you should still specify the size for images.
Eventhough images are loaded a lot faster nowadays, there is still a noticable delay between the page being displayed and the images pop up. It's still irritating when the layout of a page changes while the images are loading.
Yes, it is still preferred.
Plenty of people are not on high speed connections, and mobile is becoming more common.
It doesn't have to be inline - you can do it in external CSS. Some older browsers, if you don't specify the size, will just treat it as 0px;
Its always best to use CSS
You could hardcode the image height and width like this
.myimg img {
width: 10px;
height: 10px;
}
your image file itself should be the size you want it to display as, for the most part, if your concerned about slow loading especially! if you've got a 500X800 px image, that you only want to show as 100X200, scale it down! the file size will be much smaller so it will load faster :)
I would say yes if you want to make sure the white space is included in case of the image does not load or during document load. But no if you're scaling/resizing the image with those attributes, as its unnecessary load on the browser and causes image distortion.
If you are designing for cross browser compatibility, then you should at the very least specify the height and width in your CSS for the image itself. I have found inconsistency between FireFox, IE, Opera, etc if sizes are not specified specifically for the image. Due to the fact that each browser, not to mention different versions, handle adherence to HTML Standards differently. I have found that some browsers will do its best to extrapolate the HTML designers intent, while others just croak on the first error. I would also recommend em sizes, rather than pixel or %'s if you intend for the website to be viewed from a mobile device such as a tablet. I will say, however I have just started playing with HTML5 so I don't of the difference in HTML5 with respect to images.
I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (admins/moderators: if this isn't allowed, let me know the proper way to help).
doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.
Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.
Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :
"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them.
Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]
The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).
What I'd like to find are some magical HTML markup and CSS rules that will
Allow the images to be included in normal <img> elements
Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
Not require JavaScript or specific knowledge of each image's actual dimensions
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.
But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
http://overloaded.org/tmp/imgtest/
http://overloaded.org/tmp/imgtest/imgtest.zip
I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.
Thanks for any help or pointers you can provide!
Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.
Live Demo
contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.
cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
Possible, probably.
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
Here's a tut on using ImageMagick to do thumbnails.
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)