img wont fit on mobile device
i have a problem with my website. i want the background image to rescale corectly on mobile devices so i can see the full image on my mobile phone not just a part of it.
HTML :
<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
<div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
<div class="slide-container">
<div class="slide-content text-center">
<h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
<blockquote>
<p ></p>
<p style="margin-top: 0px"></p>
</blockquote>
</div>
</div>
</div>
</div>
CSS
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain;
background-position:center;
I want to see this on my phone, the full image:
https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45
not this
https://gyazo.com/f263a347517120a0ad368b7bbd2840ae
thanks in advance
html css responsive
add a comment |
i have a problem with my website. i want the background image to rescale corectly on mobile devices so i can see the full image on my mobile phone not just a part of it.
HTML :
<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
<div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
<div class="slide-container">
<div class="slide-content text-center">
<h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
<blockquote>
<p ></p>
<p style="margin-top: 0px"></p>
</blockquote>
</div>
</div>
</div>
</div>
CSS
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain;
background-position:center;
I want to see this on my phone, the full image:
https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45
not this
https://gyazo.com/f263a347517120a0ad368b7bbd2840ae
thanks in advance
html css responsive
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11
add a comment |
i have a problem with my website. i want the background image to rescale corectly on mobile devices so i can see the full image on my mobile phone not just a part of it.
HTML :
<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
<div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
<div class="slide-container">
<div class="slide-content text-center">
<h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
<blockquote>
<p ></p>
<p style="margin-top: 0px"></p>
</blockquote>
</div>
</div>
</div>
</div>
CSS
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain;
background-position:center;
I want to see this on my phone, the full image:
https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45
not this
https://gyazo.com/f263a347517120a0ad368b7bbd2840ae
thanks in advance
html css responsive
i have a problem with my website. i want the background image to rescale corectly on mobile devices so i can see the full image on my mobile phone not just a part of it.
HTML :
<div data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"class="sl-slide">
<div style="background-image: url(images/slide/3.jpg);"class="sl-slide-inner">
<div class="slide-container">
<div class="slide-content text-center">
<h2 class="main-title"><span class="text-primary">Tractari auto intern & international</span></h2>
<blockquote>
<p ></p>
<p style="margin-top: 0px"></p>
</blockquote>
</div>
</div>
</div>
</div>
CSS
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain;
background-position:center;
I want to see this on my phone, the full image:
https://gyazo.com/4b3726e24444038f2e6ff824a9f3ec45
not this
https://gyazo.com/f263a347517120a0ad368b7bbd2840ae
thanks in advance
html css responsive
html css responsive
edited Nov 14 '18 at 20:47
Dumisani
2,0001631
2,0001631
asked Nov 14 '18 at 18:45
Buzea MihaiBuzea Mihai
11
11
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11
add a comment |
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11
add a comment |
1 Answer
1
active
oldest
votes
So you have a couple of options, but you need to be aware of some constraints first:
The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).
In order to get the first result (100% wide, any height):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: 100% auto;
background-position:center;
And in order to get the second one (which is what you're already getting):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain OR [auto 100%];
background-position:center;
But, short of manipulating/changing the image out based on screen size with javascript
, there isn't much more control than that.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306862%2fimg-wont-fit-on-mobile-device%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So you have a couple of options, but you need to be aware of some constraints first:
The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).
In order to get the first result (100% wide, any height):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: 100% auto;
background-position:center;
And in order to get the second one (which is what you're already getting):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain OR [auto 100%];
background-position:center;
But, short of manipulating/changing the image out based on screen size with javascript
, there isn't much more control than that.
add a comment |
So you have a couple of options, but you need to be aware of some constraints first:
The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).
In order to get the first result (100% wide, any height):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: 100% auto;
background-position:center;
And in order to get the second one (which is what you're already getting):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain OR [auto 100%];
background-position:center;
But, short of manipulating/changing the image out based on screen size with javascript
, there isn't much more control than that.
add a comment |
So you have a couple of options, but you need to be aware of some constraints first:
The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).
In order to get the first result (100% wide, any height):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: 100% auto;
background-position:center;
And in order to get the second one (which is what you're already getting):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain OR [auto 100%];
background-position:center;
But, short of manipulating/changing the image out based on screen size with javascript
, there isn't much more control than that.
So you have a couple of options, but you need to be aware of some constraints first:
The image will either be the width of the screen (and probably significantly shorter than you'd like) or the height of your container (and much wider than the screen).
In order to get the first result (100% wide, any height):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: 100% auto;
background-position:center;
And in order to get the second one (which is what you're already getting):
.demo-1 .sl-slide .sl-slide-inner,
.demo-2 .sl-slide .sl-slide-inner
background-repeat: no-repeat;
background-size: contain OR [auto 100%];
background-position:center;
But, short of manipulating/changing the image out based on screen size with javascript
, there isn't much more control than that.
answered Nov 14 '18 at 19:11
RyanRyan
3169
3169
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306862%2fimg-wont-fit-on-mobile-device%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You do realize that your phone and your computer have different screen ratios? You could show the whole image, but then it's not going to fill your screen vertically.
– Jordan S
Nov 14 '18 at 18:55
@JordanS so what can i do ?
– Buzea Mihai
Nov 14 '18 at 19:10
You could choose a different image, center things differently, idk. Your problem is not a coding one.
– Jordan S
Nov 14 '18 at 19:11