(!) 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
Related
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.
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.
I've seen quite a few post on here with similar questions and they seemed to have been answered great. However my problem is I can't understand the logic of whats going on and therefore I'm finding looking at the code pointless. Also I really want to be able to understand the code I'm writing. So really I'm not for any complete code as I think I can get that from other posts but if possible could someone explain to me the theory behind the code.
So, if I have a div 500px wide and 400px high and then two photos:
photo 1: 1000px wide 800px high
photo 2 : 250px wide 700px high
How do I re size these images to fit inside the div without them becoming stretched or distorted.
Like I said in the beginning I'm not looking for code. Could someone just explain the formula that fits the photos inside the div perfectly.
The (simple) asnwer is that the browser knows the aspect ratio of your image.
If you simply use an <img> tag, the image will be displayed in the original size (and aspect ratio).
now, if you specify the width, but not the height, the aspect ration will be kept, so your image will not be distorted.
If you use a CSS attribute like max-width and/or max-height that is pretty much what happens: your browser takes the image, and if necessary, scales both the with and the height by the same factor to match your specifications.
Does that answer your question?
The browser knows your images aspect ratio. If you want a 250px wide image to fit into a 500px wide container you'll need to scale it and lose quality or keep it as is.
Setting the width to 100% and the height left to auto will scale the image to fit it's width, without assuring that your height will match your desired output. You can scale it based on height, but the same problem applies. This is especially difficult when it comes to making the images responsive.
Using object-fit might help when you're container is the same, but the image vary widely in ratio, as seen here https://css-tricks.com/almanac/properties/o/object-fit/
Or having your images set as a background-image with background-size: cover.
I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.
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...