Known Participant

Answered

(Overly) Responsive Image Question

Forum|Forum|9 years ago
January 3, 2017
3 replies
2046 views

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>

This topic has been closed for replies.

Correct answer osgood_

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.

Nancy OShea

Community Expert

Simple answer, use a bigger banner image, remove height & width attributes, clean up your layout code.

<!doctype html>

<html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body { padding-top: 55px;}

</style>

</head>

<body>

<div class="navbar-header"> <a class="navbar-brand" href="#">XYZ BRAND</a>

</div>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<h3>Heading 3</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quae recusandae ad asperiores praesentium, laborum voluptas at vero molestias ducimus, enim in, illum voluptates autem repellat laboriosam corrupti, possimus molestiae.</p>

<h3>Heading 3</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quae recusandae ad asperiores praesentium, laborum voluptas at vero molestias ducimus, enim in, illum voluptates autem repellat laboriosam corrupti, possimus molestiae.</p>

</div>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque numquam voluptatem ut, amet eveniet minus, maxime facere hic neque unde possimus et. Libero iste, facere id pariatur minima cupiditate totam!</p>

<h3>Heading 3</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quae recusandae ad asperiores praesentium, laborum voluptas at vero molestias ducimus, enim in, illum voluptates autem repellat laboriosam corrupti, possimus molestiae.</p>

</div>

</article>

<hr>

</footer>

</div>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Nancy OShea wrote:
Simple answer, use a bigger banner image, remove height & width attributes, clean up your layout code.

Too simple in a lot of cases. You might only want the height of the image on desktop to be quite a narrow depth.

The only way really if you are looking to maintain some kind of 'proportion' on different devices is to serve out 3 differently formated images. Its a pain, yes, sometimes you can 'cheat' by making the desktop image deeper if the circumstances are right. Only the developer can make that decision.

As there is 'image text' involved in this banner its more complex.

O

osgood_Correct answer

Legend

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.

K

KevinTGAuthor

Known Participant

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!

BenPleysier

Community Expert

BenPleysier wrote:
Although images have their own intrinsic height and width attributes, I tend to include these attributes for the img element so that the browser does not have to extract and compute them. This will help the browser to save the space for the image while rendering the page resulting in saved time. In this regard, it is important to note that a unit is not required as you have correctly shown in the above
<img src="ALBUMS/AVID_2015-2018/2016_Bowling7/Pic.jpg" alt="" width="500" height="340" class="img-responsive" title="Bowling"/>
It may also be worthwhile pointing out that in the online example, the jQuery library has been called twice, on lines 10 and 12 respectively. Because Bootstrap requires a minimum of version 1.11.3 and must be called before bootstrap.js, it may be wise to delete line 12.

No website developer that I follow uses a width and height attribute where the image needs to be responsive. Different strokes for different folks I guess, to me it just clogs up the html by declaring essentaily redundant tags. There might be a small arguement for reserving space on a slow connection if you want to preserve the layout while the page is downloading but unless you're living in a third world country or out in the sticks internet connectoons are pretty fast these days to alleviate such requirements.

I personally don't see any noticably difference in the test but then again I am on a lightening fast connection. Maybe if there where more images you might see a small lag in the rendering - its probably up to the developer to decide if its enough to warrant including the width and height attribute plus class in you are using Bootstrap, or not.

Fact 1: A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout.

Fact 2: A reflow involves changes that affect the layout of a (portion) of a page.

Fact 3: Images are renowned to be slower to render than most other parts of a document.

In the case of an image where the dimensions are not known at the time of rendering other parts of the page, the space required for the image is not taken into account. A reflow will be triggered once the intrinsic values for the dimensions of the image have been determined. This will further trigger reflows on the image's ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive.

Note that the above is relevant only where images have not been previously cached. A reload will therefore be much faster than an intial visit to the page.

Also note that, despite the fact that images hog a large chunk of bandwidth, until recently we have been stuck with the antiquated method of one image source. That is soon to be changed with the picture and source elements combined with srcset. See Responsive Images Done Right: A Guide To <picture> And srcset – Smashing Magazine

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

BenPleysier

Community Expert

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded