I've been using this sample to create a "zoomable" content:
http://code.msdn.microsoft.com/windowsapps/Scrolling-panning-and-47d70d4c
My HTML:
<div id="zoomElement" class="zoomElement ManipulationContainer">
<img id="zoomContent" class="zoomContent" alt="" src="sample.jpg" />
</div>
My CSS:
.zoomElement {
overflow: auto;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 20%;
-ms-content-zoom-limit-max: 500%;
}
Now, no matter what, I've been unable to center the img in its container when it's unzoomed.
Related
Image example of what I need
I basically copied the code off of a YouTube video. I am a rookie so try and explain as easily as possible how to stack two images on top of each other.
They are the same width and same height images and need to be aligned horizontally and vertically.
.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -260px;
}
<div class="image">
<img src="car.png">
</div>
There are a few ways to do this. The most simple would probably be to edit your CSS to do the following:
CSS:
.image {
width: 100%; /* Image container is now full-width */
}
.image img {
margin: 40px auto; /* "auto" will center block elements */
display: block; /* Set images to be "block" so they obey our auto margin */
}
HTML:
<div class="image">
<img src="path/to/image1.jpg">
<img src="path/to/image2.jpg">
</div>
JSFiddle
For horizontal and vertical centering:
While some may prefer the flex method, I prefer the table-cell method for simple alignment. Try this:
CSS:
.image {
width: 100%;
height: 500px /* Modify this to fit your needs */
display: table;
}
.image .centered {
display: table-cell;
vertical-align: middle;
}
.image .centered img {
margin: 40px auto;
display: block;
}
HTML:
<div class="image">
<div class="centered">
<img src="http://fillmurray.com/360/100">
<img src="http://fillmurray.com/360/100">
</div>
</div>
JSFiddle
If the question is only to put second image under the first just br tag
If the question is to make on blank page 2 images in center one under one:
<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px; margin: 0; border: 0;">
<tr style="height: 100%">
<td style="text-align: center; vertical-align: middle; height: 100%;">
<img src="1.jpg" /><br><br>
<img src="2.jpg" />
</td>
</tr>
</table>
For body and html you need also height: 100%
I'm pretty sure all positioning is possible with div so probably I'm complicated with tables but I was too tired to find the code for vertical positioning so I used tables in my work.
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
I've been trying to move the small images (thumbnails) but it won't move. It just stays fixed to the left. I've tried giving it an div id and set the margins for it but it doesn't work.
Here are the codes:
JavaScript
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
CSS
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
Html body
<body>
<img src="images/small1.png" style="cursor:pointer" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" style="cursor:pointer" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" style="cursor:pointer" onclick="showImage('3_large.jpeg');" />
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" margin: 0; padding: 0;" />
</div>
</body>
</html>
Well, if it's the three imgs tags you're talking about, you have to set their style. Something like:
<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />
and
.smallimg {
cursor: pointer;
float: right;
/* or whatever position/top/left values you need */
}
Or if you want them centered, you could do something like this:
<div style="text-align: center;">
<img src="images/small1.png" class="smallimg" onclick="showImage('images/large1.jpg');" />
<img src="images/small2.jpg" class="smallimg" onclick="showImage('images/large2.jpg');" />
<img src="3_small.jpeg" class="smallimg" onclick="showImage('3_large.jpeg');" />
</div>
A solution based on my comment. Maybe you can go through this option:
HTML
<div class="container">
<img src="http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png" alt="" />
<img src="http://ecx.images-amazon.com/images/I/41P44yRoAPL._SL75_SS50_.jpg" alt="" />
<img src="http://ecx.images-amazon.com/images/I/41B9Qbj2CBL._SL75_SS50_.jpg" alt="" />
</div>
CSS
.container
{
height: 50px; /* img height */
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* half of the img height */
margin-left: -75px; /* half of the img width's total */
overflow: hidden;
}
.container > img
{
display: inline;
}
http://jsfiddle.net/qFmhf/
I have a series of images, which I want to make them showing in a row, i.e.
[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]
I want the overflow part will be hidden.
My current HTML is as follow:
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>
and this is the CSS:
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
Here is the jsFiddle. I would like to show half image in the edge of the screen, like this:
However, I can only manage to show full images only. How should I modify the HTML / CSS codes ?
Just use overwidth in percentage, and a mask div:
DEMO
#gallery {
width: 200%; /* this is the trick */
}
#gallery img { /* and no need to add class="gallery_img" to IMGs anymore */
height: 200px;
}
#wrapper {
height: 200px;
overflow: hidden;
}
<div id="wrapper">
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
</div>
</div>
EDIT
I'll add the simplest solution too (posted by #RupaliShinde), because it shows the correct use of the white-space attribute, and appearently it is hard to reproduce (reading the comments):
#gallery {
width: 100%;
overflow: hidden;
white-space: nowrap; /* this is the trick */
}
#gallery img {
height: 200px;
}
DEMO
Have a look at this fiddle - http://jsfiddle.net/jQkHp/
I added a wrapper div around gallery:
#gallery {
position: absolute;
left: 0;
top: 0;
width: 1200px;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
#wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
You will need to use some javascript to set the width of the gallery div for this to work properly (I'm only guessing at the width at the moment).
Edit - added some js to calculate the width of gallery based on the images inside it http://jsfiddle.net/jQkHp/1/
var galleryWidth = 0;
$('#gallery > img').each(function(){
galleryWidth += $(this).width();
});
$('#gallery').css('width', galleryWidth);
Just add this in CSS
<style>
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
white-space: nowrap;
}
#gallery img {
width: auto;
height: 200px;
}
</style>
Let rest of code be as it is.
I would suggest putting the images in an unordered list within your containing div, with each image in it's own LI and then set them to display: inline-block in the css.
You'll need some way of scrolling through the images, of course, for which you could use some jquery.