Geek Answers Handbook

How to make the image be no more than in its section?

I am working on a Tumblr theme and I have an avatar image that is next to the content. However, the image is larger than the content and leaves this section. Cm:

How can I prevent image enlargement outside the section?

HTML:

<article id="" class="answer">
        <section class="question">
            <img src="http://33.media.tumblr.com/avatar_75879837bcba_128.png" alt=""><p class="asker"><a href="#">George</a> asked</p><p class="question">This is my question. I want to know what you're going to do about this. Is it a good idea?
        </section>
        <p>Answer</p>
</article>

CSS

.question { padding: 0 2em; }
article { margin: 1.5em auto; }
.question img { float: left; }
.question img { width: auto; height: 100%; }

Demo: http://jsfiddle.net/xb0ms51r/

+4
source share
3 answers

The main thing is that you need to make a clear correction, because you set the image to float, try adding the following to the sheet sheet.

section.question:after {
    content: "";
    clear: both;
    display: table;
}

Updated demo: http://jsfiddle.net/xb0ms51r/1/

+3
source

.question img {max-width:100%; max-height:100%;} CSS, , 100% .

!

+4

You need to install CSS as follows:

    .question img { 
float: left; 
width: 150px; 
height: auto;
    }

Set the height to auto to keep the image proportioned.

It may also be a good idea to set html widthand heighttag the image, it will be overwritten by CSS, but structurally correct to have

0
source

More articles:


All Articles