Prevent Child Tags Width Without changing Child Tag CSS
I want to restrict child tags width without changing css of child tags
https://jsfiddle.net/iqabb/0vt3qx9m/6/
image is overlapping from parent div (Green). I need to restrict image from overlapping parent div without changing css of image tag.
Please give a solution with Only playing with parent div css ,
so that image remian inside parent div
.block-content{
width:400px;
height:100%;
background:green;
position: relative;
}
html css
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
add a comment |
I want to restrict child tags width without changing css of child tags
https://jsfiddle.net/iqabb/0vt3qx9m/6/
image is overlapping from parent div (Green). I need to restrict image from overlapping parent div without changing css of image tag.
Please give a solution with Only playing with parent div css ,
so that image remian inside parent div
.block-content{
width:400px;
height:100%;
background:green;
position: relative;
}
html css
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
1
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26
add a comment |
I want to restrict child tags width without changing css of child tags
https://jsfiddle.net/iqabb/0vt3qx9m/6/
image is overlapping from parent div (Green). I need to restrict image from overlapping parent div without changing css of image tag.
Please give a solution with Only playing with parent div css ,
so that image remian inside parent div
.block-content{
width:400px;
height:100%;
background:green;
position: relative;
}
html css
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
I want to restrict child tags width without changing css of child tags
https://jsfiddle.net/iqabb/0vt3qx9m/6/
image is overlapping from parent div (Green). I need to restrict image from overlapping parent div without changing css of image tag.
Please give a solution with Only playing with parent div css ,
so that image remian inside parent div
.block-content{
width:400px;
height:100%;
background:green;
position: relative;
}
html css
html css
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
asked Nov 21 '18 at 16:36
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
136
1
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26
add a comment |
1
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26
1
1
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26
add a comment |
1 Answer
1
active
oldest
votes
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
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%2f53416686%2fprevent-child-tags-width-without-changing-child-tag-css%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
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
add a comment |
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
add a comment |
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
answered Nov 21 '18 at 17:32
Naeem Aqab Ur RehmanNaeem Aqab Ur Rehman
136
136
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%2f53416686%2fprevent-child-tags-width-without-changing-child-tag-css%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
1
add overflow hidden to the parent?
– Pete
Nov 21 '18 at 16:40
Thanks , but it is cropping image, is there any solution that image resized?
– Naeem Aqab Ur Rehman
Nov 21 '18 at 16:42
Why are you using base64 for a fullsize jpg?
– I haz kode
Nov 21 '18 at 17:01
not without adding css to the image - not much you can do if you don't want to do anything to the image itself
– Pete
Nov 21 '18 at 17:06
@Pete I have used overflow: auto and it worked as it can be scrolled so it would not effect UI
– Naeem Aqab Ur Rehman
Nov 21 '18 at 17:26