Unable to put a high resolution image inside an inline divs with 33.3333% width

I've created 3 inline divs that take 33.333% of their parent width and now I'm trying to put an images inside those divs. Sadly, if I put an image that exceeds the divs 33.333% width, the image goes out of the container. I'm trying to make it so that the image takes full width of parent container but I'm not having luck.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

asked Dec 29 '18 at 18:00

Bobimaru

925513

The problem is that the first two images get cut off?

– Charlie Fish
Dec 29 '18 at 18:03

No, I need them to get scaled down so they can get inside the div.

– Bobimaru
Dec 29 '18 at 18:04

I'm not sure I'm understanding. Maybe attach a screenshot of what you want it to look like?

– Charlie Fish
Dec 29 '18 at 18:05

add a comment |

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

asked Dec 29 '18 at 18:00

Bobimaru

925513

The problem is that the first two images get cut off?

– Charlie Fish
Dec 29 '18 at 18:03

No, I need them to get scaled down so they can get inside the div.

– Bobimaru
Dec 29 '18 at 18:04

I'm not sure I'm understanding. Maybe attach a screenshot of what you want it to look like?

– Charlie Fish
Dec 29 '18 at 18:05

add a comment |

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

asked Dec 29 '18 at 18:00

Bobimaru

925513

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

html css

asked Dec 29 '18 at 18:00

Bobimaru

925513

asked Dec 29 '18 at 18:00

Bobimaru

925513

asked Dec 29 '18 at 18:00

Bobimaru

925513

asked Dec 29 '18 at 18:00

Bobimaru

925513

asked Dec 29 '18 at 18:00

Bobimaru

925513

The problem is that the first two images get cut off?

– Charlie Fish
Dec 29 '18 at 18:03

No, I need them to get scaled down so they can get inside the div.

– Bobimaru
Dec 29 '18 at 18:04

I'm not sure I'm understanding. Maybe attach a screenshot of what you want it to look like?

– Charlie Fish
Dec 29 '18 at 18:05

add a comment |

The problem is that the first two images get cut off?

– Charlie Fish
Dec 29 '18 at 18:03

No, I need them to get scaled down so they can get inside the div.

– Bobimaru
Dec 29 '18 at 18:04

I'm not sure I'm understanding. Maybe attach a screenshot of what you want it to look like?

– Charlie Fish
Dec 29 '18 at 18:05

The problem is that the first two images get cut off?

– Charlie Fish
Dec 29 '18 at 18:03

No, I need them to get scaled down so they can get inside the div.

– Bobimaru
Dec 29 '18 at 18:04

I'm not sure I'm understanding. Maybe attach a screenshot of what you want it to look like?

– Charlie Fish
Dec 29 '18 at 18:05

add a comment |

2 Answers
2

active

oldest

votes

Remove the dots on responsive class.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

answered Dec 29 '18 at 18:06

Vrle

534515

2

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

1

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

add a comment |

-1

Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}

answered Dec 29 '18 at 18:05

PlanetGospel

1

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972033%2funable-to-put-a-high-resolution-image-inside-an-inline-divs-with-33-3333-width%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Remove the dots on responsive class.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

answered Dec 29 '18 at 18:06

Vrle

534515

2

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

1

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

add a comment |

Remove the dots on responsive class.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

answered Dec 29 '18 at 18:06

Vrle

534515

2

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

1

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

add a comment |

Remove the dots on responsive class.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

answered Dec 29 '18 at 18:06

Vrle

534515

Remove the dots on responsive class.

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

.wrapper {

    width: 70%;

    margin: 0 auto;

    height: 100%;

}

.gallery-container {

    font-size: 0px;

    line-height: 0;

    margin-bottom: 15px;

}

.gallery-element {

    display: inline-block;

    width: 33.33333%;

}

.responsive {

    width: 100%;

    height: auto;

}

<div class="wrapper">

        <section>

            <div class="gallery-container">

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

                <div class="gallery-element">

                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">

                </div>

            </div>

        </section>

    </div>

answered Dec 29 '18 at 18:06

Vrle

534515

answered Dec 29 '18 at 18:06

Vrle

534515

answered Dec 29 '18 at 18:06

Vrle

534515

answered Dec 29 '18 at 18:06

Vrle

534515

2

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

1

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

add a comment |

2

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

1

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

good catch there.

– Mark Schultheiss
Dec 29 '18 at 18:09

Wow, I was wondering what is going on. Thanks.

– Bobimaru
Dec 29 '18 at 18:10

add a comment |

-1

Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}

answered Dec 29 '18 at 18:05

PlanetGospel

1

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

add a comment |

-1

Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}

answered Dec 29 '18 at 18:05

PlanetGospel

1

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

add a comment |

-1

Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}

answered Dec 29 '18 at 18:05

PlanetGospel

Have you tried setting the img width and height properties to 100% like this
img {
width: 100%
height: 100%
}

answered Dec 29 '18 at 18:05

PlanetGospel

answered Dec 29 '18 at 18:05

PlanetGospel

answered Dec 29 '18 at 18:05

PlanetGospel

answered Dec 29 '18 at 18:05

PlanetGospel

1

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

add a comment |

1

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

Why would that work? The image already has a width of 100% and height of auto. Changing the height won't work.

– Charlie Fish
Dec 29 '18 at 18:05

Plus the OP might not want to change all images on the page. That is why the OP is using a class on the image and styling that class.

– Charlie Fish
Dec 29 '18 at 18:06

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk