I'm trying to auto-fit an image to it's container while maintaining its aspect ratio using css. The image has a bit too much height to fit on a phone screen. I'm using this css, which seems like it should work, but it only resizes the image for width changes, not height.
body {
background-color: #0055AF;
overflow-x: visible;
}
#new_site_teaser {
width: 405px;
height: 683px;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
#new_site_teaser img{
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
Here is a fiddle: http://jsfiddle.net/7m50rg74/
Any help would be appreciated.
change the #new_site_teaser width to % and define and height and width for the parents (body & html in this case); it'll adjust to each device. It's much better than using pixels.
See changes: http://jsfiddle.net/7m50rg74/16/
Ensure you have a meta viewport.
add this to your head tag, if not. This defines a viewport for your site to be seen on, in this case it'll adjust the width automatically for every device and have a scale = 1 (zoom).
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I have width: 100% which is very necessary for me. Based on this example code, can someone help me to glue the orange symbol on top of any key and keeping it there even if I resize the browser? like how its happening with the keyboard already.... Thank you so much!
DEMO
HTML
<!DOCTYPE html>
<html lang="en">
<hsrc="https://i.imgur.com/jc1rbcJ.gif">
</div>
</body>
</html>
</body>
</html>
CSS
.container {
position: relative;
width: 100%;
max-width: 100%;
}
.imageOne {
max-width: 100%;
}
.
width: 600px; max-width: 100%;
width: 100%; max-width: 600px;
Parent is 1000px wide
Width says element should be 600px wide. That doesn't break the max-width rule, so 600px it is!
Width says element should be 1000px wide. That breaks max-width rule, so forces element down to 600px.
Parent is 320px wide
Width says element should be 600px wide. That breaks the max-width rule which says element can only be at most 320px wide, so 320px it is!
Width says element should be 320px wide. That doesn't break the max-width rule, so 320px it is!
find more on https://css-tricks.com/tale-width-max-width/
As you pointed out each screen has different sizes. So there are two key factors in your request you need to take care off. The position and the size of your .imageTwo need to be always in %, only then it will have the same position and size of its parent .container. For your suggested letter Y on the keyboard I would do this:
.imageTwo {
position: absolute;
top: 42%;
left: 33.5%;
width: 2%;
height: 5%;
}
I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but those beyond do not have an ugly upscaled background.
It doesn't look like background images support properties like max-width, which I would usually use for a purpose like that.
What could the solution be? Is this possible in CSS without extra scripting?
I would use a div as a wrapper with a max-width and set the background to that div.
HTML
<body>
<div class="container">Content</div>
</body>
CSS
.container {
width: 100%;
max-width: 1920px; /* YOUR BG MAX SIZE */
background:url("bg.png") no-repeat;
background-size: 100%;
}
Just a really small/quick suggestion:
Depending on how it looks, and all flows together, background-size:contain; might be an option.
or, on your body, set the max width to 1920, set the margins to auto, and that might also work for you.
You can try like this. Any size image resolution will work like responsive:
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won't overlap any other element.
background-size:100% 100%;
}
You could try creating an html <img> tag with a specific id
e.g.
HTML
<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />
CSS
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won't overlap any other element.
}
For dynamic centering you would have to use Javascript in combination with a window.onresize event.
If you need more information I will edit my post accordingly.
A good alternative which is very easy to use(but does stretch your background) would be to use jquery backstretch plugin. It allows you to simply add a fullscreen background image, which will scale with resolution (which is not exactly what you want, but the best alternative I could think of).
I am rendering an image into a div. I want to avoid stretching of my image.
div {
height: 300px;
width: 300px;
}
img {
min-width: 300px;
min-height: 300px;
max-height: 300px;
}
My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
max-width: none;
min-width: 300px;
}
You can achieve this with simply adding object-fit: cover;. An example might be like -
img {
height: 300px
width: 100%;
object-fit: cover;
}
I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.
div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }
Put the image as the div background if you want to avoid stretching the easiest way (yet maintain the original width).
To make it more flexible as just using 300px use:
img {
width: 100%;
object-fit: cover;
}
Height is automatically adjusted
just specify max-width 100% and height :auto
Use max-width instead of min-width, and just set height to 300px (or only use max-height).
You can use overflow:hidden to hide any portion of the image outside of the width of the div.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
/*min-width: 300px;*/
height: 300px;
}
==>If you are gonna have fixed height and don't want width stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
}
==>If you are gonna have fixed width and don't want height stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
width: 300px
}
After giving the image a fixed height and width, I added object-fit as below:
img {
width: 300px;
height: 300px;
object-fit: contain;
}
To avoid the image from resizing use:
object-fit: none;
More about object-fit
The CSS object-fit property is used to specify how an or
should be resized to fit its container.
This property tells the content to fill the container in a variety of
ways; such as "preserve that aspect ratio" or "stretch up and take up
as much space as possible".
Object-fit Values
fill: this is default. The image is resized to fill the given
dimension. If necessary, the image will be stretched or squished to
fit.
contain: the image keeps its aspect ratio, but is resized to fit within the given dimension
cover: the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none: the image is not resized scale-down - the image is scaled down to the smallest version of none or contain.
More info and examples
I'm adding this to expand on the answers given since some of the answers given like adding width:100% height:auto" etc., will still technically stretch Images and/or make them blurry at times. Let me explain.
I work on a lot of eCommerce websites adding products etc and image stretching/blurring is always a problem. Most times, an image scaling down isn't that much of a issue, so the answers given as far as width:100%; height: auto; etc., work just fine. But there are problems when scaling up if the image's container width is larger than the image's native/normal width.
So for example, if you have an image whose width is 100px, and a div container whose width is 200px, if you add a width:100% and height: auto; to your image randomly, this won't technically "stretch" an image, but it will make it look blurry because you are stretching your image past its normal width.
To fix this, one thing i normally do is something like this, assuming on the desktop, that you have an image that you want to show at its 100% native width with no scaling/stretching/blurring whatsoever, I do something like:
img{
display:block;
margin:0px auto;
width: initial;
height: auto;
}
which keeps my images at their native width with no scaling whatsoever. But then, when an image is going to be seen on a smaller device, I add the same rule block into a media query and do something like:
#media all and (max-width: 1200px){
img{
width:100%;
height:auto;
}
}
What this is effectively saying is "Hey Image, make my image responsive from point A to point B(mobile devices), but once you go from point B to point C (small laptops to desktops where the image fits normally and doesn't need to stretch), make the width equal to its default native width".
Hope this helps. Happy coding everyone.
I am trying (if it is at all possible) to use css to make an image 100% the width of a fluid div, but as the images are square (and will be distorted if not square) I want to be able to match the height to the width... for fluid width I am using:
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
}
which works fine for setting the width on all major browsers, but I just cant figure out how to match the height to the width :/
Try throwing in height:auto into your class.
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
height: auto; // <-- add me
}
As mentioned in the comments though, most browsers should be adjusting and scaling the images correctly. But glad this could help.
Now, with CSS3 there is new units that are measured relative to the viewport, (browser window), if you want a fluid image with respect to the window this it works better in most use cases than "%". These are vh and vw, which measure viewport height and width, respectively.
.img{
max-width: 100vw;
width: 100vw;
min-width: 400px;
height: auto;
}
I have a mobile app. I want to make my css work with all mobile phones. To do this I just use percentages for all my css calls:
.Wrapper
{
margin: auto;
text-align: center;
width: 60%;
}
The problem is that I cannot get the web page height to match for all pages. By this I mean that Android screens for example are huge (with a lot of white space on the bottom) but other phones are not.(Imagine that the image below is a android. That is how my app will look on it)
I have tried this to get the heights to all be the same:
body
{
text-align: center;
font-family: Helvetica, Arial, sans-serif;
color: Black;
background: #39bcd4 none;
height: 100%;
width: 100%;
}
The width works but the height does not. How can I get the height to work the same way? If the height is off, then all my percentages are going to be off too (attempting to adjust for each mobile browser)
From Sitepoint's CSS Reference:
Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.
Setting your body to position:absolute; should work, if it doesn't try adding top:0; and bottom:0; along with your absolute positioning.
If you want the width and height of your site to be 100% of your WebView’s width and height then you need to set the viewport meta tag:
<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">
A great description of this, along with a number of other tips for hybrid apps, can be found on the Chrome developer site.
Do you mean that you want the content to space out to fill the height? Not sure if that can be done, but one design solution to all the whitespace might be to have a vertical gradient background that's darker on the bottom, to make the content look a little less lonely.
Use the viewport height unit in the css like this:
.element { max-height: 100vh; }
or
.element { min-height: 100vh; }
or even
.element { min-height: calc(100vh - 60px); }
if you need to adjust the height of a element, which is not full height.