Alignment issues with CSS3 transform scale - javascript

Im trying to use css3 scale property, but im facing issues with alignment of preceding elements
I see lots of spacing created after an element is scaled using css3.
Trying to place an images and titles beside it for a list. But when image is scaled the tile is pushed down. don't want to use absolute as it may give bad impact in different devices and page re-size
Here is the fiddle http://jsfiddle.net/sonymax46/xhwcvmj8
Also can you elaborate why this is happening
Can some one help me out.

Instead of scale through the transform property, adapt the width and height of the element to the desire size. If you don't do so, the element is going to keep the original size, resulting in that blank space.
Then you can set correctly the image size using this CSS:
background-size: contain;
background-repeat: no-repeat;
Here you have your jsfiddle updated.

Related

Vary height of hero image with browser window size

I am trying to achieve an effect which can be seen on the https://lexus.com.au website where
no matter what the browser screen height (desktop or laptop etc) the hero image and the cta bar always fill the browser screen.
The height of the hero image varies as the browser height changes.
The image also centres on the main content as the screen changes.
The CTA bar at the bottom of the screen always remains the same height and location.
Is this done with JS using window.InnerHeight or some other method?
TL:DR:
Is this done with JS using window.InnerHeight or some other method? No
There are 2 reasons that contribute to this and while there are likely more, these are the ones I can see without rebuilding what was done just to give you the answer.
They use the background-position: % % to position the image. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% https://www.w3schools.com/cssref/pr_background-position.asp
This is what gives the image that look of squeezing under the top banner.
Then these were done to position the element itself within the above div. background-size: cover; display: table; https://mattboldt.com/kicking-ass-with-display-table/
It's important to understand that throughout this the reason for it taking up the full width is simple; width was set to 100%. That is actually the easiest part of the whole effort. However combining the above elements to get the correct effect will take some playing with on a codepen. That being said what I've given you is what you need to know to succeed.
Links below are good links to get you started on fully understanding how to complete this task.

CSS/JS Get the width of a glyph

I'm using a font as a way to display vector images, and it has very wide glyphs. They happen to be so large they get out of the div they are in:
The blue gun is a rotating glyph contained in a div. When I try to get its size, it doesn't give me the full length of the glyph.
Because of that, I can't center it.
Thanks!
Seeing the CSS would definitely help. Without seeing that, my best thought would be setting max width as a percent to scale.
.your-selector.class{
max-width: 50%;
}

How to cover a div with an image independently of its height?

(!) This question could be considered duplicated, however, did not find anything that could fit as a solution in up to 10 topics - I am sorry for that, I am trying to find a solution to this particular situation;
Let me explain the problem,
I'll leave here an image that may help you understand the issue :
I have a full width div, which height will change on page heights alteration.
This div contains full width images covering it, so you can see in the following screenshot :
So I tried to make it full width as well full height, independently of the parent's height
( which is higly vulnerable to changes once its height depends on the distance between the top and bottom of the screen - So anytime we change screen's height, the referred div will as well change the div's height);
The problem spawns here :
When the screen receives a ration between width and height of 1:2 (width:height), then, images will re-size once the page's width (which is img's max width) will not be enough to fill the height, not filling the div as I wished, as you can verify at following screenshot:
(the red part is the parent div of the image)
I will be searching for a solution in javascript/jquery/css
The use of the image as background is being discouraged and it did not work as I tried before
Any tip or indication will be highly appreciated and praised;
If you find this topic offensive or a rule-breaker, please notify so I can delete this question once I do not want to spam this wonderful community.
Thanks in advance ! (accept my apologies for this long question)
With the best wishes,
Vladimir
the property that you're looking for is:
background-size: cover; (for background-image);
object-fit: cover; (for regular images);
ps: the container of the object-fit picture must have overflow: hidden

How to adjust or resize the background image of div dynamically based on content size

I am working on Html and Css. I am trying to design a chart conversation like web page where i need to show the messages alternatively like one comes right another on left similar in mobile applications. For that i am using divs to contains the message and i set a background-image for it,
Here what the problem i am facing is, message are of variable size that means some may occupy 1 line and some other might 5 to 20 lines we cannot estimate it. Div background-image size is 40px height only so if i got more than 3 lines of message then it crosses the background image. Here is my Div markup
<div style="background-image:url('some url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here is my content it is variable in size</div>
I have used the css properties like overflow:hidden but it didn't help me. Is there any way so that image or div will be automatically resized based on the content size vertically. Or other way i can follow that is closely related to my requirement. Please guide me.
You could make use of the CSS property background-size but it won't be supported in old browsers (mainly IE<9 which might not be a problem):
background-size: cover;
Or
background-size: 100% 100%; /*x and y*/
Or you can try to use jQuery to deal with it.
I would recommend you to take a look at: Perfect Full Page Background Image
Anyway, the image will get distorted and might not look very good. What usually is done in these cases is splitting the image in 3. Top, middel and bottom,so the middle image can be repeated on the Y axis.
But, you will still having problems with the graduated background, which you might want to use as another background image or rather with CSS3...
My advice: less is more. Make things easier. Take a look around in other sites and see how they try to avoid complex images. If possible, deal only with CSS, avoid requests, speed up your site and bring the new minimalist style to your site.
Here is a possible solution:
Just split it up into 3 divs.
see here
It works with splitting the image into three parts:
- Top
- Middle
- Bottom
But you should really consider building chat bubbles by using only HTML and CSS as it improves performance and lessens network requests.
You can use "background-size":
background-size: cover;
Read more:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Yet I don't recommend this. You better split your image to two image and use two div.
You may use jquery dotdotdot plugin and shrink the content of a div to a specific height and width so that it appears nicer..
You have an option to show the remaining content with a link at the end of your content allocated for the div and show the left over content may be in a popup or something you may want..
Browser support isn't as good as background-size (to my knowledge), but this seems like a case for border-image.
The image you're already using as background should split fairly well and this will let the div scale without causing the left and right edges of the speech bubble to stretch in the same way they would if the background image is just stretched to fit.
More info: http://css-tricks.com/understanding-border-image/
background-size: 100;
or
background-size: cover;
are the CSS solutions. If this does not fit your needs, then you can use jQuery's getWidth, getHeight, setWidth and setHeight functions.
Here's a working fiddle using background-size: 100% 100%;
By adding a couple of <br>'s after your message, you can compensate for the pointer to the bubble in your image.
You have loads of sites with chat bubbles made only with CSS.
Here are some examples:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://www.sitepoint.com/pure-css3-speech-bubbles/
http://www.ilikepixels.co.uk/drop/bubbler/
http://html-generator.weebly.com/css-speech-bubble-generator.html
If you have any doubt after viewing those, please ask us about it :)
Friend,
Try add this property in the element:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Because you set 100% of width but add to paddings and margins.
See if this working...

How to make background image shrink proportionally to fit button size in javascript?

I am making a chessboard in javascript. The chessboard's squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px.
button
{
width:40px;
height:40px;
border: 0
}
However, some of the pieces that were designed for this earlier chessboard are still 60px by 60px. Is there any way in Javascript to make the images shrink proportionally to fit the square size? Currently, the images fit the square size, but do not shrink, so when I say,
square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.
I get pieces like this -
If the WhiteKing.jpg had shrunk proportionally, it would have fit nicely. Is there a way to do this in Javascript? Any help would be really appreciated.
Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:
button{
width:40px;
height:40px;
border: 0;
background-size: 100%; /* To fill the dimensions of container (button), or */
background-size: 40px auto; /* to specify dimensions explicitly */
}
Of course you can use that in JavaScript too (but it's better to add it to already existing CSS for button):
square.style.backgroundSize = '100%';
Your going to want to use:
Background-size: 100%;
There are different options for how to do this, but if it was me, I'd physically resize the actual image files to maintain optimal control over the image quality. If there are a lot of files, and this would be time consuming to do in Photoshop (or whatever image editor you use), then use your favourite scripting language paired with something like ImageMagick and let the computer do what it does best ;)
CSS
Use CSS3 background-size as mentioned by Juicy Scripter. Note that background-size is, however, a newer CSS attribute which won't work in older browsers (like < IE 8) and may require vendor prefixes in other browsers.
MDN: background-size
CSS3.info: background-size
W3: background-size
HTML
Load the chess piece image with an actual img tag and change the width of that html element (downside is this will probably cause reflows that might slow down page rendering or cause flickering or other undesirable weirdness). You'll probably need to use different positioning techniques (like position, z-index, etc.) depending on your implementation.
Manual
Just make the images physically smaller. I think this is, in the end, the best (albeit the most time-consuming) option as it will allow you to retain maximum control over the quality of the images. Different browsers may unpredictably resize the images in different ways (depending on how they handle resizing), whereas if you resize them yourself, you're guaranteed that the images are presented in the way you intend.
Perhaps try adding position:relative and background-color:transparent to the button's style, then use a div inside the button tag setting the top and left to 0px. Inside this div please a tag for the button graphic with the style set to the new width/height (40px).
Might not need to use absolute position for the graphic if you don't want to put anything on top of it. If you do, use z-index on the div to move it behind any text, etc...
Give that a go. Hope it works! :D

Categories