CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
Akshay Pardhanani
Akshay Pardhanani

Reputation: 122

Image width not being rendered correctly

I have an image tag whose src attribute is initially blank (src=""). On calling an API, a url is returned which is the public url of the image.

After this URL is returned by the api, it is set on the src attribute (src="protocol://public/url/of/the/image")

My problem is that the image must be exactly 48px X 48px (they must appear to be thumbnail images). If the image is larger than that then, it must be reduced to those dimensions and if it is smaller than that then it must stretch to those dimensions.

I tried setting the height and width properties and/or the height and width through css (external stylesheet as well as inline styling).

There are 4 such <img> tags. Not all the images render with the specified height and width, the image(s) not rendering properly with the height and with are not specific images but quite random.

I hope I have described the problem adequately. Thank you

Edit 1: My code Markup

<div class="some-container" id="first-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="second-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="third-one"> <img src='' class="thumbs"/> </div>
<div class="some-container" id="fourth-one"> <img src='' class="thumbs"/> </div>

javascript:

$.ajax({
 // call to the api which returns the urls as an array
 success: function(data){
     // Assume data['url*'] gives the url
     $('#first-one').attr('src', data['url1']);
     $('#second-one').attr('src', data['url2']);
     $('#third-one').attr('src', data['url3']);
     $('#fourth-one').attr('src', data['url1']);
  }
});

CSS:

.thumbs{
    height: '48px';
    width: '48px';
}

When I inspect I see that the url has been set properly and the correct image is also rendered however the size is what is inaccurate. As mentioned I have also tried setting the styles inline, and using the height and width properties but to no avail.

Edit 2: The Demo:

http://new.fundinghunt.co/x-ai-raises-23-million-for-its-ai-personal-assistant-plans-to-launch-this-fall/

Once the page loads, scroll down you will see a widget with a few emoji click 'Love' (otherwise the section I am talking about will not show up).

Edit 3: The Solution:

The problem has finally been resolved as chsdk

pointed out I had to add a display: inline-block; to the links. Additionally I had to wrap the <img> tag and the link in separate <div>..</div> tags. This resolved the issue.

Thank you for your help everyone :)

Upvotes: 2

Views: 1436

Answers (1)

cнŝdk
cнŝdk

Reputation: 32175

Well in CSS properties value doesn't need quotes, So just replace:

.thumbs{
   height: '48px';
   width: '48px';
}

With the following:

.thumbs{
   height: 48px;
   width: 48px;
}

Otherwise they won't be considered as valid CSS, and that's your problem.

This is a working snippet:

    .thumbs {
      height: 48px;
      width: 48px;
    }
<div class="some-container" id="first-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="second-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="third-one">
  <img src='' class="thumbs" />
</div>
<div class="some-container" id="fourth-one">
  <img src='' class="thumbs" />
</div>

Upvotes: 2

Related Questions