I'm new to this community: I'm trying to use jQuery Mobile to create a simple GUI in Windows Phone style.
I want to create some tiles with images and then I must adjust them to the screen width: I tried to do this with the style rule " style="width: 100%;" " but the border of the image is too heavy.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiles Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
<link rel="stylesheet" href="Framework\Theme\Metro.css" />
<link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" />
<script src="Framework\JQ\1.10.1.js"></script>
<script src="Framework\JQM\1.3.0.js"></script>
</head>
<body>
<div data-role="page" id="Menu">
<div data-role="header" id="Menu\Header">
<h1>
Menu
</h1>
</div>
<div data-role="content" id="Menu\Content" style="padding: 2%">
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="image.png" style="width: 100%;" />
</div>
<div class="ui-block-b">
<img src="image.png" style="width: 100%;" />
</div>
</div>
</div>
</div>
</body>
But the result is: http://img801.imageshack.us/img801/9474/6aoq.png
How can I fit the image to the screen size? (Something like this; http://img19.imageshack.us/img19/1305/f1y4.png)
I would try using css instead of jquery. You can accomplish what you're looking for with that. For example, you are using two images. You could set each one to a width of about 45% of the screen and add a border all in css. You can even have it dynamically scale based on screen size. It would probably be best to use div containers to organize it but this example should be enough to get you started.
I would try something like this:
<html>
<head>
<style>
<style type="text/css">
#images {
height: yourheightinpx;
}
#images img {
position: absolute;
max-width: 100%;
width: auto\9;
}
</style>
</head>
<body>
<div id="images">
<img src="yoursrc"><img scr="yoursrc">
</div>
</body>
</html>
Related
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>
I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.
<html>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
#media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
The CSS isn't working because its not contained with-in style tags.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
#media (min-width:641px) {
body {
background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;
}
}
</style>
</head>
<body>
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
For one, you're missing a <style> tag around your media query there. Also, I'd recommend against using inline styles (i.e. style="" attribute tags in your HTML). Keep all your CSS in one place, preferably a separate CSS file you can link to in your head tag.
Also, make sure you keep your media queries declared after your other CSS for those selectors. Whatever comes last will take precedent!
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>