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!

K

KevinTGAuthor

Known Participant

KevinTG wrote:
OK. I thought I did it right, but now it has disappeared.
<script>
$(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="" />');
}
}
});
</script>
<div class="col-lg-12 swap_image"><img src="images/Sequence-01.gif" alt="" /></div>

Are your images in the 'images' folder as your initial link suggests:

If so then add the name of the folder before the name of the images in the <script> code like:

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

Also delete the 'I' before swap_image in this piece of code:

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

Edited

Yes your images ARE in the 'images' folder BUT they are not much good - all you have succeeded in doing is reducing the height of them. If you want the images to work on smartphone think about it. A smartphone held vertically is narrow and tall, your image is long and short - you need to completely reformat the image for a narrow format device which means moving the text elements of the image around, to achieve that fromat.

http://marcoavid.com/images/Sequence-01.gif

http://marcoavid.com/images/Sequence-01-Phone.gif

You have to make decisions - is the image important enough to warrant the extra work involved of reformating it to a different shape/size for different devices or could you just hide it at smartphone size.

I think I got it! I just do not know how to align it with the other images when displayed on the phone.

Thank you!

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