Fixed Layout Banner Image

Question

I want to insert a banner image in a content editor, is it possible to have this image resize based on the size of the respective user's screen? Any help is appreciated

Answer 1

Usually you can have the image relative to the screen page. Just use the content editor to also insert a tag to allow that image to be 100% width, display block, and set a max-height, then it should shrink based on the browser's size or resolution.

<style>
  .imgbanner {
      display: block;
      max-height:95px;
      width: 100%;
      height: auto;
  }
</style>
      <img class="imgbanner" src="http://www.w3schools.com/tags/smiley.gif" />

Answer 2

If you are using content editor you can try JavaScript for image resize by resolution. I recommend adding JS into a html file and calling that file into Content editor.

For image resize using JS check this link https://stackoverflow.com/questions/4572621/auto-image-resize-based-on-browser-window-dimensions