I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:
DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}
<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>
Related
How can I create a single image from a tiled structure like this:
+-----+-----+-----+
|tile1|tile2|tile3|
+-----+-----+-----+
<div>
<div>
<img> tile 1
</div>
</div>
<div>
<div>
<img> tile 2
</div>
</div>
<div>
<div>
<img> tile 3
</div>
</div>
This is the detail:
<div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;">
<div style="position: absolute; left: 0px; top: 0px;">
<img src="tile1.png" style="width: 256px; height: 256px;">
</div>
</div>
<div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;">
<div style="position: absolute; left: 0px; top: 0px;">
<img src="tile2.png" style="width: 256px; height: 256px;">
</div>
</div>
....
You can simply make a canvas big enough to hold all of your images, then draw each image at the appropriate offset to replicate the same tiling effect that your HTML provides.
Or, if you really want to specifically capture the layout from your HTML, there's a package called html2canvas (https://html2canvas.hertzen.com/) which will do screen captures from any HTML, not just tiled images.
I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.
You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I need some help to make the image fit inside the DIV Tag with provided height and width and should not stretch. As a few images are Landscape and a few are Portrait, I need to force them to fit into the DIV OR IMG Tag.
<div class="frame" style="">
<img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>
This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output
You will need to use some CSS position trickery to achieve what you want but hopefully one of these examples will do what you want.
Example 1 - A Single Image
In the example below, the image will grow or shrink when the image hits the edge of the container. If you resize the example horizontally or vertically it will never crop. (Try the fullscreen example for instance).
Requires: CSS Only
body {
margin: 0;
padding: 0;
font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
z-index: 2;
}
.gallery .imageWrapper {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.gallery .imageWrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div class="gallery isFullScreen">
<div class="imageWrapper">
<img src="http://via.placeholder.com/3500x1500" />
</div>
</div>
Example 2 - Thumbnails
In this example there are two images that don't conform to their containers aspect ratio. They are resized so that their longest edge hits the div first and then they are centered. All thumbnail containers should now be the same size and images that do not conform shrink to fit.
Requires: CSS Only
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 100px;
height: 100px;
float: left;
background: #fff;
}
.galleryArea .imagePosition {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Example 3 - Thumbnails that Stretch
In this example, the two images that do not conform to their containers aspect ratios are now stretched so that their shortest edge expands to fill the container and their longest edge overflows. This makes the end result a little neater but requires JavaScript to help things along.
Requires: CSS and JavaScript (jQuery)
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
display: flex;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
left: -50%;
margin-left: 25%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
I am trying to use Jssor Slider, I copy a demo and it works fine.
While after I try to move the inline css into a separate css file, the bullet navigator displays at the top of the slider instead of at the bottom.
This is my original html with inline css:
<div id="slider_container" style="top: 0px; left: 0px; width: 1179px; height: 582px;">
<!-- Slides Container -->
<div u="slides">
<div><img u="image" src="image/home-banner/logo.jpg"/></div>
<div><img u="image" src="image/home-banner/getup.jpg"/></div>
<div><img u="image" src="image/home-banner/onroad.jpg"/></div>
<div><img u="image" src="image/home-banner/atbed.jpg"/></div>
</div>
<!--arrow navigator-->
<span u="arrowleft" class="slider-arrowl" style="width: 50px; height: 50px;left: 8px"></span>
<span u="arrowright" class="slider-arrowr" style="width: 50px; height: 50px;right: 8px"></span>
<!-- bullet navigator container -->
<div u="navigator" class="slider-bullet" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
</div>
After I move the style to a css file :
div#slider_container{
position: relative;
margin: auto;
margin-top: 40px;
padding: 10px;
top: 0px; left: 0px; width: 1179px; height: 582px; display: block
}
Jssor slider will duplicate 'outer container' and 'slides' container while initialize. And it will remove id attribute from duplication.
Duplicate 'outer container' is to scale the slider.
Duplicate 'slides' container is for slideshow purpose.
I see.
Please replace
<div id="slider_container"
with
<div id="slider_container" class="slider_container"
And replace
div#slider_container {
with
div.slider_container {