0

https://jsfiddle.net/ug4u48pr/3/

I'm trying to build a simple app to put on a webpage with the intention to be accessed by mobile devices.

Because mobile devices tend to have a variety of resolutions, I figured I'd try to make the header/footer sections remain as consistent as possible by making them have heights of 20% with the body section having a height of 60%.

The problem is that I can't seem to fit the image within the constraints of the relative height of the header.

I've looked around and failed with an assortment of things such as...

img {max-height: 100%; max-width: 100%;}
img {display: block; overflow: visible/hidden;}
img {width: 100%; height: auto;}
img {height: 70px;}

The solution to my problem has to work dynamically as the window is resized.

I've managed to make the image properly scale by setting it as a "background". Before as an , it was too large/small and didn't fit the header. Now it does, but ruins the positioning of the title.

The "Application Title" should be centered vertically/horizontally with respect to the remaining width of the header, with its left edge of the cell touching the right edge of the image.

I figure there is a simple and straight forward solution, but I just can't seem to find it.

zack
  • 95
  • 1
  • 6
  • I would drop all your image elements, and use the background properties to work with your image. The first thing you'll need the background-image property, and there are several other properties you can work with which you can explore at this website: https://developer.mozilla.org/en-US/docs/Web/CSS/background – Tyler Mar 31 '17 at 02:52
  • in addition to the above comment, generally you want to avoid having images on mobile web browsers as images will eat up people's data. This method is very mobile-friendly if you set the background-image code in media queries (css stuff that will only apply depending on the screen sizes you specify). – Tyler Mar 31 '17 at 02:54
  • Thanks for the tip on using "background" properties. I've updated the JSFiddle and got it to stay within the header, but I don't know how to collapse the cell to fit around the background image. As far as images+web browsers+mobile data... I'm not too concerned since the actual image I'm going to be using is small (< 200x200). – zack Mar 31 '17 at 03:17
  • from my understanding, the element that is holding the image via background is not post to scale according to the image, rather the other way around. By using certain background properties (background-size specificly i believe), you can alter how the image will scale to the size of the element. There is also background-repeat property that will make the image tile. Try taking a look at the answers in this question: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background?rq=1 – Tyler Mar 31 '17 at 10:20

0 Answers0