I have a bunch of images in a vertical row, and when you swipe to
scroll though them it's not smooth. It tends to jump up a little as
each pic comes into view.
However, once I scroll thru the images and back up it is smooth the second time around, like they are cached or something. I tried pre-loading images with no change.
Any ideas? Thanks.
<div id="pics">
<div class="toolbar">
Back
<h3>Pics</h3>
</div>
<div id="wrap">
<h1 class="picname">Pic name</h1>
<p class="date">Jan 1, 2010</p>
<img src="1.png">
<h1 class="picname">Pic name</h1>
<p class="date">Jan 10, 2010</p>
<img src="10.png">
<h1 class="picname">Pic name</h1>
<p class="date">Jan 11, 2010</p>
<img src="11.png">
<h1 class="picname">Pic name</h1>
<p class="date">Jan 14, 2010</p>
<img src="14.png">
<h1 class="picname">Pic name</h1>
<p class="date">Jan 17, 2010</p>
<img src="17.png">
</div>
</div>
It is an issue with jqtouch, you can not change sizes drastically, I had that issue with dynamically loaded content, there are probably two solutions:
provide image sizes
load images one by one using onload/onabort handlers to go to next image
Related
I'm having a problem scaling a png image with a transparent background with a width of 279 pixels and height of 432 pixels with class img-responsive on bootstrap3.
The Problem:
Whenever, I upload the png image inside the img tag with the class=
"img-fluid" it remains the same size as I scale. Other images seems to
work fine, but if I try to upload a bigger image it will become
responsive but only scale from very large to normal size, not from
normal to small.
My question is
What is the best way to optimize a PNG image for Bootstrap-3 with the class img-responsive?
HTML:
<div class="poster">
<div class="container">
<div class="intro-text">
<div class="intro-heading">Welcome <img href="../html/indexfinal.html" class="bigv" src="../images/logos/bigvlogo.png" alt=""/> <img href="../html/indexfinal.html" class="midv" src="../images/logos/midvlogo.png" alt=""/> </div>
<div class="intro-lead-in">Hi yall'</div>
<div class="container-fluid">
<img class="mascot" src="../images/mascot/wave.png">
</div>
<a style="float:left" id="guestsignup"></a>
</div>
</div>
</div>
It will work.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" class="img-responsive" alt="Cinque Terre">
</div>
</div>
</div>
Resize the screen to see the difference.
You can add img-responsive class to existing code:
<img class="mascot img-responsive" src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg">
Hope that is what you are looking for.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width
<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.
I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
I have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>