Resize the image to div
0
I have this code:
.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>I want to show an Image who shouldn't get stretched. But right now the side creates a scrolling box to scroll the image in the width because the image is very long.
html css image resize
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
add a comment |
0
I have this code:
.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>I want to show an Image who shouldn't get stretched. But right now the side creates a scrolling box to scroll the image in the width because the image is very long.
html css image resize
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
just set.post-thumb img max-width: 100%; width: 100%;instead of min-width
– Minal Chauhan
Nov 15 '18 at 12:01
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16
add a comment |
0
0
0
I have this code:
.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>I want to show an Image who shouldn't get stretched. But right now the side creates a scrolling box to scroll the image in the width because the image is very long.
html css image resize
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
I have this code:
.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>I want to show an Image who shouldn't get stretched. But right now the side creates a scrolling box to scroll the image in the width because the image is very long.
.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>.post-container
overflow: auto
.post-thumb
width: 300px;
height: 300px;
overflow: hidden;
.post-thumb img
min-width: 100%;
<div class="post-container">
<div class="post-thumb"><img src="../images/logo.png" /></div>
</div>html css image resize
html css image resize
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
edited Nov 15 '18 at 12:08
Pete
41.8k1877120
41.8k1877120
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
asked Nov 15 '18 at 11:58
marcelo.wdrbmarcelo.wdrb
10019
10019
just set.post-thumb img max-width: 100%; width: 100%;instead of min-width
– Minal Chauhan
Nov 15 '18 at 12:01
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16
add a comment |
just set.post-thumb img max-width: 100%; width: 100%;instead of min-width
– Minal Chauhan
Nov 15 '18 at 12:01
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16
just set
.post-thumb img max-width: 100%; width: 100%; instead of min-width– Minal Chauhan
Nov 15 '18 at 12:01
just set
.post-thumb img max-width: 100%; width: 100%; instead of min-width– Minal Chauhan
Nov 15 '18 at 12:01
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16
add a comment |
3 Answers
3
active
oldest
votes
2
can you try :
.post-thumb img
width:100%;
min-height: 1px;
display: block;
Tell me if this helps you or changes something.
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
add a comment |
0
You can scale your image using a CSS style:
.post-thumb img
transform: scale(2,6); // example scale ( width, heigth )
Note: first look how browsers support this
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
add a comment |
0
I would suggest regular responsive setup as in
.post-thumb img
display: block;
max-width: 100%;
height: auto;
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
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
);
);
draft saved
draft discarded
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%2f53319014%2fresize-the-image-to-div%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
can you try :
.post-thumb img
width:100%;
min-height: 1px;
display: block;
Tell me if this helps you or changes something.
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
add a comment |
2
can you try :
.post-thumb img
width:100%;
min-height: 1px;
display: block;
Tell me if this helps you or changes something.
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
add a comment |
2
2
2
can you try :
.post-thumb img
width:100%;
min-height: 1px;
display: block;
Tell me if this helps you or changes something.
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
can you try :
.post-thumb img
width:100%;
min-height: 1px;
display: block;
Tell me if this helps you or changes something.
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
answered Nov 15 '18 at 12:01
Bojan KolanoBojan Kolano
14210
14210
add a comment |
add a comment |
0
You can scale your image using a CSS style:
.post-thumb img
transform: scale(2,6); // example scale ( width, heigth )
Note: first look how browsers support this
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
add a comment |
0
You can scale your image using a CSS style:
.post-thumb img
transform: scale(2,6); // example scale ( width, heigth )
Note: first look how browsers support this
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
add a comment |
0
0
0
You can scale your image using a CSS style:
.post-thumb img
transform: scale(2,6); // example scale ( width, heigth )
Note: first look how browsers support this
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
You can scale your image using a CSS style:
.post-thumb img
transform: scale(2,6); // example scale ( width, heigth )
Note: first look how browsers support this
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
answered Nov 15 '18 at 12:05
javimovijavimovi
318110
318110
add a comment |
add a comment |
0
I would suggest regular responsive setup as in
.post-thumb img
display: block;
max-width: 100%;
height: auto;
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
add a comment |
0
I would suggest regular responsive setup as in
.post-thumb img
display: block;
max-width: 100%;
height: auto;
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
add a comment |
0
0
0
I would suggest regular responsive setup as in
.post-thumb img
display: block;
max-width: 100%;
height: auto;
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
I would suggest regular responsive setup as in
.post-thumb img
display: block;
max-width: 100%;
height: auto;
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
answered Nov 15 '18 at 12:19
Peter PajchlPeter Pajchl
2,2321624
2,2321624
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53319014%2fresize-the-image-to-div%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
just set
.post-thumb img max-width: 100%; width: 100%;instead of min-width– Minal Chauhan
Nov 15 '18 at 12:01
I believe your statement is contradicting itself. You don't want for the image to stretch but at the same time it shouldn't be it's original size when very long? Did you mean it should not increase over 100% width of it's parent while keeping proportions?
– Peter Pajchl
Nov 15 '18 at 12:16