Is there a way to resize a div based on an images size?-CodePudding

I am currently creating a custom media player for a customer with HTML and javascript. The customer only needs to add an empty element containing necessary data-attributes (such as preview-image, srcset, URL) to the site for the script to create a player unit. The image and the media are siblings within the wrapping parent. A click on the play button basically just hides the image and displays the media.

Player unit markup:

<div >
<img  src="...">
<button >Play</button>
<iframe >...</iframe>
</div>

The website owner now wants the size of the player to be dependent on the size of the preview image or srcset. I tried to use the image as wrapper, but it's not a container element. Is there any way to size the parent depending on the images size?

CodePudding user response：

Set any other element (except the image) inside the wrapper absolute and wrapper itself a inline-block, to allow automatic width. Then image makes wrapper to be the same ratio or size as itself.

When hiding the image after click, use relative positioning and z-index lower than the iframe (for example 10 in my example).

Set iframe size to 100%/100% to cover the same area as image and wrapper.

<style>
<!--

.wrapper {
  display: inline-block;
  position: relative;
}

.play-button {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  color: red;
}

.preview-img {
  position: relative;
  z-index: 40;
  display: block;
  width: 500px;
}

.embedded-media {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
}

-->
</style>

<div >
<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png">
<button >Play</button>
<iframe >...</iframe>
</div>