Hello All, If I can get some help with this, I would highly appreciate it. I am creating a responsive website for a project, but one main issue I am having is controlling the <img> in the header area especially when the browser width is in large scale view that it stays a certain height but not full scale like now. Ignore the logo as that is on the image, and all I care about is having the header stay a certain heigh. I used on the header through css as a practice, but it still didnt resolve the issue. B/c my menu disappears. header { max-height: 400px;overflow: hidden;} Beyond that I dont know. I attached a visual, just as an idea. source link: http://inam0001.site44.com/dsn1544/project-1/
May this help you. <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> </picture>
I thought about this but, it keeps my image fixed per responsive state. With out having it scale on its own, just by code.
Generally speaking you shouldn't be trying to 'scale' it. In fact a full screen logo is "not viable for web deployment" in most cases and shows flawed thinking/methodology. You should have designed a narrow height fluid width multi-element header instead of a single fixed size image. From what I'm seeing on that link, throw it out and start over. That goes for the markup and images too... Gibberish use of numbered headings since I'm pretty sure "location" isn't a subsection of Welcome, "Hours" isn't a subsection of "Location" nor is "follow us" a subsection of "Hours" -- but that's how you used them. Of course you've got all that pointless HTML 5 garbage bloat in there too -- I'd swing an axe at all that.... no media type on the LINK, fictional META that serve no real purpose, paragraphs on what's a list (of times)... ... and of course images auto-scaling into useless-land on desktop which is why you're here in the first place; the laugh being the use of the steaming pile known as SVG, which is better left in the 1990's where it belongs. (say hello to much higher CPU and battery use on mobile!)... and the massive header image that would piss off mobile just as much as desktop for being insanely and ridiculously large pushing content below the fold. Quite literally, throw it out and start over, I wouldn't even try to salvage anything from that. Though it is an excellent example of why I advocate starting wtih a 800 friendly desktop layout FIRST, and then media querying it both directions instead of the 'start from mobile first' approach.