(Overly) Responsive Image Question

Report · Jan 02, 2017

Can anyone explain why my banner image gets so small when reduced to phone size?

Marco AVID

Also, why do the margins around my images not appear when reduced to phone-sized?

Thank you for your time and help!

Kevin

<!doctype html>

<html>

<head>

<title>Marco AVID</title>

a:link {

color: #000000;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: rgba(0,0,0,1);

}

a:hover {

text-decoration: none;

color: #888585;

}

a:active {

color: #000000;

}

</style>

<!--[if lt IE 9]>

<![endif]-->

</head>

</div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

</div>

<li><a href="https://mfms.schoolloop.com/portal/login?d=x&return_url=1414597056174" title="Schoolloop" target="_blank">Schoolloop</a></li>

<li><a href="https://portal.capousd.org/ParentPortal/LoginParent.aspx?page=default.aspx" title="Portal" target="_blank">Student & Parent Portal</a></li>

<li><a href="Events.htm" title="Events" target="_blank">Scheduled Events</a></li>

<li class="dropdown"><a href="#" title="Photos & Video" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Photos & Video<span class="caret"></span></a>

<li><a href="2016-2019_album.html">Class of 2016-2019</a></li>

<li><a href="2015-2018_album.html">Class of 2015-2018</a></li>

<li><a href="2014-2017_album.html">Class of 2014-2017</a></li>

<li><a href="2013-2016_album.htm">Class of 2013-2016</a></li>

<li><a href="2012-2015_album.htm">Class of 2012-2015</a></li>

<li><a href="2011-2014_album.htm">Class of 2011-2014</a></li>

<li><a href="2010-2013_album.htm">Class of 2010-2013</a></li>

<li><a href="2009-2012_album.htm">Class of 2009-2012</a></li>

<li><a href="2009-2011_album.htm">Class of 2009-2011</a></li>

<li><a href="2008-2010_album.htm">Class of 2008-2010</a></li>

<li><a href="2006-2008_album.htm">Class of 2006-2008</a></li>

<li><a href="2004-2006_album.htm">Class of 2004-2006</a></li>

<li><a href="#">Class of 2003-2005</a></li>

<li><a href="ALBUMS/2002_Yearbook.pdf">Class of 2000-2002</a></li>

<li><a href="ALBUMS/1999_AVID.pdf">Class of 1997-1999</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" title="Advice for Parents" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">Advice for AVID Parents<span class="caret"></span></a>

<li><a href="AVID_Parents.htm" title="Advice for Parents" target="_blank">English</a></li>

<li><a href="AVID_Parents_Spanish.html" target="_blank">Espanol</a></li>

</ul>

</li>

</ul>

<li><a href="AVID Application.pdf" title="Application" target="_blank">AVID Application</a></li>

<li class="dropdown"><a href="#" title="About Marco AVID" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown">About Marco AVID<span class="caret"></span></a>

<li><a href="AVID_History.htm">AVID History</a></li>

<li><a href="Marco_AVID_History.htm">Marco AVID History</a></li>

<li><a href="avid_statistics.htm">AVID Statistics</a></li>

<li><a href="faq.htm">Frequently Asked Questions</a></li>

<li><a href="Recruitment.mp4" target="_blank">Informational Video</a></li>

<li><a href="Recruitment_in_Spanish.mp4" target="_blank">Video Informativo de AVID</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

</div>

<br>

</header>

</a>

</a>

</div>

</a>

<button type="button" class="btn btn-default">6th Grade Resources </button>

</a>

<button type="button" class="btn btn-default">7th Grade Resources </button>

</a>

<button type="button" class="btn btn-default">8th Grade Resources </button>

</a>

<p><a class="dropdown-item" href="2016-2019_album.html">Class of 2016-2019</a><p>

<p> <a class="dropdown-item" href="2015-2018_album.html">Class of 2015-2018</a><p>

<p> <a href="2014-2017_album.html" target="_blank" class="dropdown-item">Class of 2014-2017</a><p>

<p> <a href="2013-2016_album.htm" target="_blank" class="dropdown-item">Class of 2013-2016</a><p>

<p><a href="2012-2015_album.htm" target="_blank" class="dropdown-item">Class of 2012-2015</a><p>

<p><a href="2011-2014_album.htm" target="_blank" class="dropdown-item">Class of 2011-2014</a><p>

<p><a href="2010-2013_album.htm" target="_blank" class="dropdown-item">Class of 2010-2013</a><p>

<p><a href="2009-2012_album.htm" target="_blank" class="dropdown-item">Class of 2009-2012</a><p>

<p><a href="2009-2011_album.htm" target="_blank" class="dropdown-item">Class of 2009-2011</a><p>

<p><a href="2008-2010_album.htm" target="_blank" class="dropdown-item">Class of 2008-2010</a><p>

<p><a href="2006-2008_album.htm" target="_blank" class="dropdown-item">Class of 2006-2008</a><p>

<p><a href="2004-2006_album.htm" target="_blank" class="dropdown-item">Class of 2004-2006</a><p>

<p><a href="ALBUMS/AVID_2003-2005/2003-2005_AVID.mp4" target="_blank" class="dropdown-item">Class of 2003-2005</a><p>

<p><a href="ALBUMS/2002_Yearbook.pdf" target="_blank" class="dropdown-item">Class of 2000-2002</a><p>

<p><a href="ALBUMS/1999_AVID.pdf" target="_blank" class="dropdown-item">Class of 1997-1999</a><p>

</div>

<h1><a href="http://www.gofundme.com/marcoavid" title="Go Fund Me" target="_blank">SUPPORT MARCO AVID THROUGH GOFUNDME.COM</a></h1>

<hr>

<h3>Upcoming Events</h3>

<p>No School: December 22, 2016 - January 8, 2017</p>

<p>La Brea/Pink's/Hollywood/Griffith Observatory: January 14, 2017 (7th Grade)</p>

<p>No School: Janury 16, 2017</p>

</video></center>

</div>

</div>

</div>

<h2 class="noDisplay">Main Content</h2>

<br>

<br>

</article>

</a> <a href="Ralphs.pdf"><br>

</a>

<br>

</aside>

</section>

<hr>

<p><a href="HOF.htm" target="_blank" class="PageLinks">Marco AVID Hall of Fame</a></p>

</div>

<p><a href="AVID_AllStars.htm" target="_blank" class="PageLinks">Marco AVID All Stars</a></p>

</div>

<p><a href="College_Acceptance_Graphs/College_Acceptance_Graphs_index.html" target="_blank" class="PageLinks">College Acceptance Graphs</a></p>

</div>

<p><a href="High_School_Checklist.pdf" target="_blank" class="PageLinks">High School Checklist</a></p>

</div>

<hr>

<br>

<div class="col-md-3"><a class="twitter-timeline" href="https://twitter.com/Marco_AVID" height="400">Tweets by Marco_AVID</a>

<h4>DEATH VALLEY TRIP</h4>

<p>November 18-22, 2017</p>

<p> 8th Grade</p>

</div>

<h4>SUMMER TRIP</h4>

<p>8th Grade </p>

</div>

<h4>YOSEMITE TRIP</h4>

<p>April 3-6, 2017</p>

<p>7th & 8th Grade </p>

</div>

</video>

</div>

</video>

</div>

<br>

</div>

</center>

</div>

</body>

<center><p><a href="https://www.instagram.com/marcoavid/"><img src="images/Instagram.jpg" width="47" height="47" alt="description"/></a> Follow MarcoAVID on Instagram</p></center>

</div>

<center><p><a href="https://www.facebook.com/profile.php?id=100013003500254"><img src="images/Facebook.png" width="47" height="47" alt="description"/></a> Follow MarcoAVID on Facebook</p></center>

</div>

<center><p><a href="https://twitter.com/Marco_AVID"><img src="images/Twitter.jpg" width="47" height="47" alt="description"/></a> Follow MarcoAVID on Twitter</p></center>

</div>

</html>

Report · Jan 02, 2017

Because of the class that you have assigned to the image as in

<img src="images/Sequence-01.gif" alt="" width="1100" height="158" class="img-responsive"/>

See http://getbootstrap.com/css/#images for more info.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 02, 2017

That's the way responsive images act. Unfortunately the format between a desktop and a smartphone is so radical it pretty much renders your images as useless on the smaller device - so you have to take that into consideration.

You need to rework your image into different formats - desktop, tablet and smartphone (you may get away with tablet)

Then you can use jQuery to swap the image as specific window sizes, example code below: (you obviously need to replace the links to the image with those of your own)

<!DOCTYPE html>

<html>

<head>

<title>Swap Images</title>

$(document).ready(function(){

window.onresize = function() {

if ($(window).width() > 768) {

$('.logo').html('<img src="oxford.jpg" alt="Oxford" />');

}

if ($(window).width() < 768) {

$('.logo').html('<img src="chocolate.jpg" alt="Chocolate" />');

}

if ($(window).width() < 481) {

$('.logo').html('<img src="chester.jpg" alt="Chester" />');

}

});

</script>

</head>

<body>

</body>

</html>

This is why a lot of developers use background images - as background images can be 're-sized' as can the container they are in if you use media queries. However that wont generally help if your image contains a lot of text - in that case it needs to be refornated to more suit the format it is going to be rendered on.

Report · Jan 03, 2017

I apologize for being a novice website builder. It seems to me that the image inside some type of container should somehow change with the size of the container.

I kind of get what you are saying. But where in the this page's HTML would that go?

Would it simply replace this?

</div>

Thank you!

Report · Jan 03, 2017

Add the class 'swap_image' to the div as below and remove the height/width attributes.

Then add the below code to the <head> </head> section of your pages code:

$(document).ready(function(){

window.onresize = function() {

if ($(window).width() > 768) {

$('.swap_image').html('<img src="oxford.jpg" alt="Oxford" />');

}

if ($(window).width() < 768) {

$('.swap_image').html('<img src="chocolate.jpg" alt="Chocolate" />');

}

if ($(window).width() < 481) {

$('.lswap_image').html('<img src="chester.jpg" alt="Chester" />');

}

});

</script>

Then change the image links to YOUR images - so if you had another image for tablet named 'sequence_tablet.gif' in the 'images' folder:

Change:

to

and for smartphone change:

to

and for desktop

to

Report · Jan 03, 2017

OK. I thought I did it right, but now it has disappeared.

<!doctype html>

<html>

<head>

<title>Marco AVID</title>

$(document).ready(function(){

window.onresize = function() {

if ($(window).width() > 768) {

$('.swap_image').html('<img src="Sequence-01.gif" alt="" />');

}

if ($(window).width() < 768) {

$('.swap_image').html('<img src="Sequence-01-Tablet.gif" alt="" />');

}

if ($(window).width() < 481) {

$('.lswap_image').html('<img src="Sequence-01-Phone.gif" alt="" />');