CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ayush Mahajan
Ayush Mahajan

Reputation: 649

How to adjust image size according to current resolution of screen?

I want to do something like this in CSS:

.addImage{
    background-image:url('imageURL');
    // This is where I have a query:
    background-size: get_current_length get_current_width;
}

Upvotes: 1

Views: 55

Answers (6)

Ayush Mahajan
Ayush Mahajan

Reputation: 649

I solved this question(with help of stackoverflow) and here is my code:

.addBackgroundImage{

background-image:url('image_url');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; 
-webkit-background-size: 100vw 100vh;
-moz-background-size:  100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}

Upvotes: 0

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20206

if it is background image,

.addImage {
    background-size: 100%;
}

if it is image,

.addImage {
    width: 100%;     
    height: 100%;
}

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You can use viewport units to get the current width/height of the page. Use 100vw for 100% of the viewport width, and 100vh for 100% the viewport height.

Upvotes: 1

Oshawott
Oshawott

Reputation: 540

I propose to use trick:

img
{
  max-width: 100%;
}

Upvotes: 0

mohammad mozafari
mohammad mozafari

Reputation: 43

You can say:

.addImage
{
    background-image: url(URL);
    background-size: 100%;
}

Upvotes: 0

vuffer
vuffer

Reputation: 166

I'm not really sure what you're asking, you have to be more clear but it seems to me, you want the image to scale with the browser resolution. If so you can use percentages to specify width and height.

.addImage {
    width: 100%;     
    height: 100%;
}

Upvotes: 0

Related Questions