I'm working on a project where I have a few button images that I'd like to automatically resize depending on the browser or screen size.
I've managed to get this in CSS with this code:
#nav {
max-width: 100%;
position: absolute;
top: 0%;
right: 0%;
width: auto;
height: auto;
z-index: 8;
}
img { max-width: 100%; height: auto; }
However I'd like it to also stretch horizontally from left to right. The image stick to the left side of the browser but when I increase the width of the browser it results with this:
I'd like to stretch the images all the way to the right as well if possible.
well, try to add to your <head> of the page following:
<meta name="viewport" content="width=device-width">
That should work. And if you want them to the center, just use
body {text-align:center;}
or img {margin-left:auto; margin-right:auto;}
Related
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
so I am currently implementing a mobile version to my website and everything is fine except I want to be able make it so the image will fill 100% width of the screen whether the user tuns it horizontally or vertically. The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device. Any suggestions?
I currently am using
.blog{
padding:10px;
border-bottom:2px solid #eeeeee;
padding:10px;
background:#ececec;
}
.blog-img{
text-align:left;
width:100%;
margin:0 auto;
padding:10px 0 5px 0;
}
I've also tried:
min-width:100%;
The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device.
It is not working as expected because you are giving the parent element .blog-img a width of 100%.
You need to directly target the nested img descendant element and give it a width of 100%:
.blog-img img {
height: auto;
width: 100%;
}
Depending on what you're trying to achieve, setting a min-width of 100% may be better in certain cases.
.blog-img img {
height: auto;
min-width: 100%;
}
Using width: 100% will stretch the img element to a width of 100%.
Using max-width: 100% will increase the width of the img element to the maximum total width of the img resource. In other words, this will prevent the img element from being stretched larger than it actually is.
Here is an minimal example highlighting the difference:
<p>Using <code>max-width: 100%</code></p>
<img style="max-width: 100%;" src="http://placehold.it/50" />
<p>Using <code>width: 100%</code></p>
<img style="width: 100%;" src="http://placehold.it/50" />
Since you're optimizing your site for mobile browsers, be sure to set a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
How about this, add the image you want, as a background of a DIV or the document's BODY.
If you decide to go with a DIV, width: 100%;, height: 100%; and you can also include z-index, if you wish to go above or behind some content.
{
background-image: url(http://arianapierce.com/wp-content/uploads/2010/11/simple-lights-twitter-background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
I would also suggest you include viewport in your HTML, it makes the page much more stable.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/