CSS: Fit image with % w/h in div with % width
up vote
0
down vote
favorite
I have an image that I want to scale to 50% w+h but need it to fit in a div that has a width set to 25%. I keep getting a distorted image with a height set to 50% but the width set to 25%.
I'm using this css:
.pb_benefits_img_wrapper {
height: 100%;
width:25%;
float:left;
text-align:right;
padding-right: 15px;
padding-top: 10px;
border:1px solid red;
}
.pb_benefits_img_wrapper > img {
width: 50%;
min-height: 50%;
}
Any help would be appreciated.
css image
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
add a comment |
up vote
0
down vote
favorite
I have an image that I want to scale to 50% w+h but need it to fit in a div that has a width set to 25%. I keep getting a distorted image with a height set to 50% but the width set to 25%.
I'm using this css:
.pb_benefits_img_wrapper {
height: 100%;
width:25%;
float:left;
text-align:right;
padding-right: 15px;
padding-top: 10px;
border:1px solid red;
}
.pb_benefits_img_wrapper > img {
width: 50%;
min-height: 50%;
}
Any help would be appreciated.
css image
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
4
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Setmax-heightandmax-widthinstead and make sure you have big enough images to fill at-least 50%
– Justinas
Nov 19 at 11:50
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have an image that I want to scale to 50% w+h but need it to fit in a div that has a width set to 25%. I keep getting a distorted image with a height set to 50% but the width set to 25%.
I'm using this css:
.pb_benefits_img_wrapper {
height: 100%;
width:25%;
float:left;
text-align:right;
padding-right: 15px;
padding-top: 10px;
border:1px solid red;
}
.pb_benefits_img_wrapper > img {
width: 50%;
min-height: 50%;
}
Any help would be appreciated.
css image
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
I have an image that I want to scale to 50% w+h but need it to fit in a div that has a width set to 25%. I keep getting a distorted image with a height set to 50% but the width set to 25%.
I'm using this css:
.pb_benefits_img_wrapper {
height: 100%;
width:25%;
float:left;
text-align:right;
padding-right: 15px;
padding-top: 10px;
border:1px solid red;
}
.pb_benefits_img_wrapper > img {
width: 50%;
min-height: 50%;
}
Any help would be appreciated.
css image
css image
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
asked Nov 19 at 11:48
PruitIgoe
2,7631250105
2,7631250105
4
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Setmax-heightandmax-widthinstead and make sure you have big enough images to fill at-least 50%
– Justinas
Nov 19 at 11:50
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58
add a comment |
4
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Setmax-heightandmax-widthinstead and make sure you have big enough images to fill at-least 50%
– Justinas
Nov 19 at 11:50
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58
4
4
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Set
max-height and max-width instead and make sure you have big enough images to fill at-least 50%– Justinas
Nov 19 at 11:50
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Set
max-height and max-width instead and make sure you have big enough images to fill at-least 50%– Justinas
Nov 19 at 11:50
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
I would not say it's ideal but hope below code will help you.
<style>
img.image{
visibility:hidden;
width:100%;
height:auto;
}
.imageContainer{
background-image:url("backgroundImage.webp");
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
width:25%;
display:inline-block;
}
</style>
<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>
If the image's served is a dynamic one then.Slight change will be the way the image is served.
answered Nov 19 at 12:01
vssadineni
340110
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
I would not say it's ideal but hope below code will help you.
<style>
img.image{
visibility:hidden;
width:100%;
height:auto;
}
.imageContainer{
background-image:url("backgroundImage.webp");
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
width:25%;
display:inline-block;
}
</style>
<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>
If the image's served is a dynamic one then.Slight change will be the way the image is served.
answered Nov 19 at 12:01
vssadineni
340110
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
add a comment |
up vote
1
down vote
accepted
I would not say it's ideal but hope below code will help you.
<style>
img.image{
visibility:hidden;
width:100%;
height:auto;
}
.imageContainer{
background-image:url("backgroundImage.webp");
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
width:25%;
display:inline-block;
}
</style>
<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>
If the image's served is a dynamic one then.Slight change will be the way the image is served.
answered Nov 19 at 12:01
vssadineni
340110
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
I would not say it's ideal but hope below code will help you.
<style>
img.image{
visibility:hidden;
width:100%;
height:auto;
}
.imageContainer{
background-image:url("backgroundImage.webp");
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
width:25%;
display:inline-block;
}
</style>
<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>
If the image's served is a dynamic one then.Slight change will be the way the image is served.
answered Nov 19 at 12:01
vssadineni
340110
I would not say it's ideal but hope below code will help you.
<style>
img.image{
visibility:hidden;
width:100%;
height:auto;
}
.imageContainer{
background-image:url("backgroundImage.webp");
background-size:cover;
background-position:50%;
background-repeat:no-repeat;
width:25%;
display:inline-block;
}
</style>
<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>
If the image's served is a dynamic one then.Slight change will be the way the image is served.
answered Nov 19 at 12:01
vssadineni
340110
edited Nov 19 at 12:08
answered Nov 19 at 12:01
vssadineni
340110
answered Nov 19 at 12:01
vssadineni
340110
answered Nov 19 at 12:01
vssadineni
340110
340110
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
add a comment |
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
ha, that's exactly what I did (kind of). Just trying to get it to stop resizing when ti reaches a certain width (original img is 303x303, want it to stop when the image is 1/4 (78px roughly).
– PruitIgoe
Nov 19 at 12:05
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53374007%2fcss-fit-image-with-w-h-in-div-with-width%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
4
You set image to be minimum 50% of height. Since your container is very high, that's where your distortion comes from. Set
max-heightandmax-widthinstead and make sure you have big enough images to fill at-least 50%– Justinas
Nov 19 at 11:50
Does the parent box (img_wrapper) need to be 100%? this is causing the container to be far larger than your intended image.
– r007ed
Nov 19 at 11:58