Make image width 100% and the word on the image still properly highlighted-CodePudding

I want to make the width of an image relative to it's parent div and still the highlighted box properly alinged on the words. But when I give image 100% width, it will not properly aligned.

Fiddle: https://jsfiddle.net/cv7g149k/3/

.summary {
  background-color: #fff;
  border: 2px solid #9197ae;
  width: 700px;
  padding: 15px;
  margin: auto;
  z-index: 1;
  text-align: left;
  box-shadow: 0 0 3px #000;
}

.image-results {
  max-width: 700px;
  margin: auto;
}

.image-holder {
  display: block;
  position: relative;
}

.word-highlight {
  background-color: rgba(240, 45, 58, 0.3);
  border: 1px solid rgba(240, 45, 58, 0.4);
  position: absolute;
  border-radius: 4px;
  margin: -2px -4px;
  padding: 2px 4px;
  box-sizing: initial !important;
}

<div >
  <div >
    Number of Detected Words:<span>64</span>
  </div>
  <div >
    Detected words: <span>Python, Javascript</span>
  </div>
</div>

<div >
  <div >
    <img src="https://miro.medium.com/max/1400/0*GV5Xm8Ve-tb_qAAs" >
    <div  style="left: 171px; top: 173px; width: 70px; height: 22px;"></div>
    <div  style="left: 141px; top: 241px; width: 100px; height: 22px;"></div>
  </div>
</div>

CodePudding user response：

Instead of specifying exact px for the position of word-highlight classes, you may want to use % to define the position

.summary {
    background-color: #fff;
  border: 2px solid #9197ae;
  width: 700px;
  padding: 15px;
  margin: auto;
  z-index: 1;
  text-align: left;
  box-shadow: 0 0 3px #000;
}

.image-results {
    max-width: 700px;
    margin: auto;
}

.image-holder {
  display: block;
  position: relative;
}

.word-highlight {
  background-color: rgba(240, 45, 58, 0.3);
    border: 1px solid rgba(240, 45, 58, 0.4);
    position: absolute;
    border-radius: 4px;
    margin: -2px -4px;
    padding: 2px 4px;
    box-sizing: initial !important;
}

img {
  width: 100%;
}

<div >
  <div  >
    Detected words:<span>64</span>
   </div>
</div>

<div >
  <div >
  <img src="https://miro.medium.com/max/1400/0*GV5Xm8Ve-tb_qAAs" >
  <div  style="left: 12%; top: 19%; width: 5.5%; height: 4%;"></div>
  <div  style="left: 10%; top: 26.5%; width: 8%; height: 4%;"></div>
</div>
</div>

CodePudding user response：

Add width: 100%; and height: 100%: to your image class so that it fills 100% of the parent div. Then you will have to adjust your values for word-highlight.

.summary {
  background-color: #fff;
  border: 2px solid #9197ae;
  width: 700px;
  padding: 15px;
  margin: auto;
  z-index: 1;
  text-align: left;
  box-shadow: 0 0 3px #000;
}

.image-results {
  max-width: 700px;
  margin: auto;
}

.image-holder {
  display: block;
  position: relative;
}

.word-highlight {
  background-color: rgba(240, 45, 58, 0.3);
  border: 1px solid rgba(240, 45, 58, 0.4);
  position: absolute;
  border-radius: 4px;
  margin: -2px -4px;
  padding: 2px 4px;
  box-sizing: initial !important;
}

.img-width-banned-words {
  height: 100%;
  width: 100%;
}

<div >
  <div >
    Number of Detected Words:<span>64</span>
  </div>
  <div >
    Detected words: <span>Python, Javascript</span>
  </div>
</div>

<div >
  <div >
    <img src="https://miro.medium.com/max/1400/0*GV5Xm8Ve-tb_qAAs" >
    <div  style="left: 80px;top: 83px;width: 44px;height: 20px;"></div>
    <div  style="left: 73px; top: 117px; width: 47.5px; height: 20px;"></div>
  </div>
</div>