CODEWITHSUNDEEP
htmlcss
We are Borg
We are Borg

Reputation: 5313

HTML, CSS : Image size not proper

I am working on a Spring-MVC project in which we have JSP files with HTML,CSS code inside it. Now, there is a span class with some text and image inside. The image width and height is set to 90, but the image is looking so small, almost 1/3rd the size of a thumbnail. Any idea why that is happening and what can I do to rectify it without just increasing the height and width. Thank you.

Code :

 <div class="span4">
            <div class="service clearfix">
                <table>
                    <tr>
                        <td valign=top><img src="${pageContext.request.contextPath}/resources/assets/img/image.jpg" alt="Text" height="90" width="90"></td>
                        <td>
                            <p>"some texxt"
                            </p>
                    </tr>
                </table>
                <small style="margin-left: 107px">Some text</small>

            </div>
        </div>

Now when I ctrl press the span4class, it shows me two different line-numbers in Intellij for bootstrap, I am posting code on both of them.

span4 class :

.row-fluid .span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%
}

2nd :

.span4 {
    width: 300px
}

clearfix class :

.clearfix {
    *zoom: 1
}

.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: ""
}

.clearfix:after {
    clear: both
}

Why is the image looking so small, is something wrong in CSS? THank you.

Screenshot

enter image description here

Upvotes: 0

Views: 101

Answers (3)

daan.desmedt
daan.desmedt

Reputation: 3820

Try setting the img width to 100% and the height to auto to ensure that the image is resized proportional.

Use the !important tag to give prio to this css tag.

table tbody tr td img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

Adding CSS to your 'project'

Add inline CSS on your HTML page with following syntax table tbody tr td img { width: 100% !important; max-width: 100% !important; height: auto !important; }

Or add it to the existing CSS file.

Remove the width & height property on the IMG tag to prevent overwriting the CSS values

Upvotes: 1

mhyassin
mhyassin

Reputation: 134

Just add display: block; to the img css rules.

You can see a working example here:

.row-fluid .span4 {
    width: 31.914893617021278%;
    *width: 31.861702127659576%
}
.span4 {
    width: 300px
}
.imgStyle{
  display:block;
  width:90px;
  height: auto;
}
<div class="span4">
  <div class="service clearfix">
    <table>
      <tr>
        <td><img src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Text" class="imgStyle"></td>
        <td>
          <p>"some texxt"</p>
        </td>
      </tr>
    </table>
    <small style="margin-left: 107px">Some text</small>

  </div>
</div>

Upvotes: 0

Krešimir Galić
Krešimir Galić

Reputation: 376

Try to make img tag max-width: 100% then your image will be responsive and you wont have problems.

So you need to add this your code: 

table tbody tr td img {
    max-width: 100%;
}

Upvotes: 1

Related Questions