Does database-insert of image influence width:100%?

HTML & CSS
1

When using width:100% the following way in a responsive web design context …

<img src='car.jpg' alt='' style='width:100%;'>

… then the image will fit in the window of the screen or device.

However, when the image is inserted dynamically via a JavaScript-coded database, I’m having trouble getting the image to fit in a small screen. The above 1500px-width image will overflow the small screen rather than fit device-width. Is there a reason for this?

Meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

The CSS:

body {
	padding:0;margin:0; background-color: #000;
}

The database query output:

function querySuccess(tx, results) {
	var path = results.rows.item.category +
		"/" + results.rows.item.subcat +
		"/" + results.rows.item.filename_lg;
		
	document.getElementById("output").innerHTML = "<a href='index.html' onclick='returnTo()'><img src='" + path + "' alt='' style='width:100%;'></a>";
	successCB();
}

The body:

<body id="output">

Why won’t the image resize to the smaller screen? How do I get it fit it to any small screen?

2

Try sizing the container rather than the image itself for better reliability.

e.g.


<div class="image-wrap"><img src="" etc..></div>



.image-wrap{width:100%;}/* set min or max-widths as required*/
.image-wrap img{width:100%;height:auto;}

If that doesn’t work I’d need a working example to play with :slight_smile:

3

This properly sizes the oversized 1532px image to fit the device width (using your code), apart from the DB:

CSS:

<style type="text/css">
body {
	padding:0;margin:0;
}
.image-wrap{width:100%;}/* set min or max-widths as required*/
.image-wrap img{width:100%;height:auto;}
</style>

Body:

<body>
<div class="image-wrap">
	<a href="index.html">
		<img alt="" src="0buggies/0118_buggies/wallpaper-18b2.jpg" />
	</a>
</div>
</body>

But when I incorporate the same code with a JavaScript DB, the image overflows; it doesn’t fit the device-width as the previous code does:

CSS:

<style type="text/css">
body {
	padding:0;margin:0; background-color: #000;
}
.image-wrap{width:100%;}/* set min or max-widths as required*/
.image-wrap img{width:100%;height:auto;}
</style>

Script (in Head):

function querySuccess(tx, results) {
	var path = results.rows.item.category +
		"/" + results.rows.item.subcat +
		"/" + results.rows.item.filename_lg;
		
	document.getElementById("output").innerHTML = "<a href='index.html' onclick='returnTo()'><img src='" + path + "' alt='''></a>";
	successCB();
}

Body:

<body>
<div id="output" class="image-wrap"></div>
</body>
4

Hi,

I think we may need to see a working demo.

If I load a new image with jquery it seems to work ok.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.outer {
	width:50%;
	margin:auto;
	padding:10px;
	background:#f9f9f9;
	border:1px solid #000;
}
#add-image {
	cursor:pointer;
	background:red;
	color:#fff
}
.image-wrap { width:100%; }
.image-wrap a { display:block }
.image-wrap img {
	width:100%;
	height:auto;
}
</style>
</head>

<body>
<body>
<div class="outer">
		<div id="add-image">Click to add image</div>
		<div id="output" class="image-wrap"></div>
</div>
</body>
<script>
$( "#add-image" ).click(function() {
 $('#output').html("<a href='index.html'><img src='images/zimg5.jpg' alt='test'></a>")
});

</script>
</body>
</html>

Make sure the anchor is also set to display:block and is not floated or has other rules cascading.

Can you make a small demo if you can’t post a link?

5

I am using the Cordova PhoneGap mobile environment, so an API library or two will be necessary to load. It’s more complicated than “post a link,” I’m afraid. The database follows these instructions, for instance: http://iphonedevlog.wordpress.com/2014/04/07/installing-chris-brodys-sqlite-database-with-cordova-cli-android/

The code is very similar to this gist, which is an earlier version of the code attempting to use iScroll5: https://gist.github.com/StevenHu/0417e9e3bd73061687f0 (which I’m abandoning for this version on this SitePoint page, since I can’t get the pinch/zoom to work with a DB).

I was hoping it was a simple CSS issue, but I wonder if the CSS and image from the DB are not timed right to work with each other, like the image is being applied too late or too early for the CSS to work.

6

Hi,

Yes it sounds more complex than a straight CSS issue especially as you say it works normally but not when injected.

Is the element width controlled by a media query at the point you inject it. I’m wondering whether the media query is failing and letting the width go back to the wrapper width - not that it helps us of course.

What happens if you hide the overflow on image-wrapper? Does the image wrapper stretch 1500px wide or is that working properly?

Perhaps you could trigger a redraw after the image has loaded. e.g. change a class on the body or something or maybe the redraw solution from here.

Unfortunately I think its one of those things you will have to throw code at until you can see a change.

7

The page is just to display one image, so the CSS above is ALL the CSS on the page. The media query in the OP is all there is.

I’ll try some of the techniques on the StackOverflow page.

Thanks!

8

What’s odd is that the CSS on the DB page has no effect at all. That is, I change the width of the img from 100% to 50% – even to 10% – and there was no difference in the image size.

9

Sorry for the late reply. I’ve been away for a few days. Did you manage to find a solution to this?

Sounds like there is something else going on here.