height =“ 100％”与 <object> 但不是 <img> ，区别HTML vs CSS width / height属性？

Question

I've got two codes and I don't know why the use of height=100% works only on image? in other cases it does nothing and the content choose the minimum height the object ignore it but not the image.

   <section id="corps">
      <object data="images/test.pdf" type="application/pdf" width="100%" height="100%">

      </object>
      <img src="images/test.png" width="90%" height="90%">
   </section>

And plus, Why width and height property works in html without style = "..." but others like min-height needs it. Is it just because html support these? Thanks!

Answer 1

<style>
    #corps{ height: Xpx} //replace X with the value that suits you
    #corps object{height: 100%} //Now you'll get the 100% height
</style>

Alternatively, if you use position: absolute then height: 100% will work just fine.

About why <img src="images/test.png" width="90%" height="90%"> works, because height and width are HTML5 properties for images. You can achieve the same thing by using <img src="images/test.png" style="width: 90%; height: 90%;"> , Now this is CSS.