HTML/js How can I set multiple div widths from multiple different image widths?

Question

I want to add my own captions to my images which are the same width as the images. I'm using javascript to obtain the widths of the images, from Get width of specific div and use as another div's height?, except that only works for an individual image, and would require me to set a separate id for each div. Is there an easier way?

The image captions are created by

<img src="myimage.png">
<div class="imgtxt">Caption</div>

<img src="myimage2.png"> <!-- Width set to 80% -->
<div class="imgtxt">Caption2</div> <!-- Div width still at 100% because its the width of the image class -->

and the current javascript is taken from the link above

var imgWidth = $('img').css('width');
$('.imgtxt').css('width', imgWidth);

I'd wrap the pair of images and captions in, say, a `figure` tag and use jQuery to loop over them via `$('figure').each(function() { $('figcaption', this).width($('img', this).width()) } );` See this codepen: https://codepen.io/csdv/pen/RBzvyp — Charlie Schliesser, Aug 16 '18 at 21:38
You should consider making this more semantic : http://html5doctor.com/the-figure-figcaption-elements/ — Jon P, Aug 16 '18 at 23:04

score 1 · Accepted Answer · edited Aug 16 '18 at 22:34

1

You can try this:

$("img").each(function(i){
  var imgWidth = $('img').eq(i).css('width');
  $('.imgtxt').eq(i).css('height', imgWidth);
});

edited Aug 16 '18 at 22:34

Barry

3,303
7
23
42

answered Aug 16 '18 at 21:41

Red Lemon

69
6

If I had an image without a caption, what do you suggest? I've found that my captioned images at the bottom of the page end up being the same width of the images further up the page which don't have captions, rather than the images it is attached to – Rocked 03 Aug 16 '18 at 21:56
You can add id to divs, and id should be a number that correspond to image. The code would be: $("img").each(function(i){ var idp="#" + i; var imgWidth = $('img').eq(i).css('width'); $(idp).css('height', imgWidth); }); I think that should work. – Red Lemon Aug 16 '18 at 22:00

score 1 · Answer 2 · answered Aug 16 '18 at 21:52

Try this:

$('img').each(function() {
    imgWidth = $(this).css('width');
    $(this).next('.imgtxt').css('height', imgWidth);
});

Ps: jQuery's .css method doesn't return a jQuery object so it doesn't offer implicit collection iteration, so we need to explicitly iterate through the collection using jQuery's .each method.

score 1 · Answer 3 · answered Aug 16 '18 at 22:46

Optionally, you could grab all the captions, and navigate from them to the image to get the width to set.

$('.imgtxt').width(function(){
  return $(this).prev('img').css('width');
});

img:nth-of-type(1) {
  min-width: 50px;
  min-height: 25px;
  width: 50px;
  border: 1px solid black;
}

img:nth-of-type(2) {
  min-width: 100px;
  min-height: 80px;
  width: 80px;
  border: 1px solid black;
}

.imgtxt {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="myimage.png">
<div class="imgtxt">Caption</div>

<img src="myimage2.png">
<div class="imgtxt">Caption2</div>

Jon Warren · Answer 4 · 2018-08-17T14:36:15.943

-1

If you want a solution without javascript, you could try adding a wrapper to your images and captions like this

<div class="img-wrapper" style="display: table">
  <img src="https://via.placeholder.com/250x300">
  <div class="imgtxt">Caption</div>
</div>

And then styling the wrapper as a table. I've demonstrated an example here.

edited Aug 17 '18 at 14:36

answered Aug 16 '18 at 21:45

Jon Warren

857
6
18

Please include all relevant code in the answer itself. Without the CSS you only have a half answer. Top tip, in the editor use the `<>` button to bring up a snippets editor, this gives you something very similar to jsFiddle in StackOverflow itself. P.S. I didn't down vote. – Jon P Aug 16 '18 at 22:59
You could also make this mare semantic with `figure` and `figcaption`. See: http://html5doctor.com/the-figure-figcaption-elements/ – Jon P Aug 16 '18 at 23:01
Sorry about that, by saying "styling the wrapper as a table" I just meant to add `display: table;` to the css for it. I've added it to my answer for clarification – Jon Warren Aug 17 '18 at 14:35

HTML/js How can I set multiple div widths from multiple different image widths?

4 Answers4