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.
Related
I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
I would like to have a container and set the background image for the container.
This container must be resizable when resizing the window.
Inside that container there are set of divs which have absolute positions and different z-indexes and assemble an snapshot of a car.
by re-sizing the window this bike also should re-size and stay in the center of that container.
<div class="col-lg-8 left-panel">
<div class="resizable-container">
<div class="resizable-wrapper">
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
</div>
</div>
</div>
.resizable-container{
width: 100%;
min-height: 400px; (this height also should be resizable)
background: url('background.jpg');
}
.resizable-wrapper{
position: relative;
height: 100%;
/* margin: 0px auto; */
top: -59px; (I have to do this to make the image position centered)
left: -19%; (I have to do this to make the image position centered)
}
Can you guys help me please to achieve this? Do I need to write some script to set the height, top and left or I can do this purely using CSS. In both way I need your help. Thanks
here is the Jsfiddle https://jsfiddle.net/7dsggjpo/3/
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 {
I have a basic thumbnail list which can contain images of varying aspect ratios as illustrated in this fiddle:
Demo 1
The problem is - it looks a bit untidy due to the mishmash of aspect ratios.
Ideally I would like the images that don't conform to a specific aspect ratio to stay centered and overflow gracefully based on their shortest edge.
I've managed to get it to work for tall images but not wide ones as demonstrated in this fiddle:
Demo 2
Here is the markup and CSS:
CSS
.galleryArea {
background: rgba(0,0,0,0.7);
display:flex;
padding: 10px;
}
.galleryArea .imageWrapper {
position: relative;
width: calc(10% - 2px);
padding-top: 8%;
margin: 0 1px;
}
.galleryArea .imagePosition {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
width: 100%;
}
HTML
<div 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>
Ideally this would be a pure CSS solution, but if it's impossible I don't mind using JS(jQuery) to achieve the result.
Many thanks
Chris
Edit
To better illustrate my intentions, here is an example showing it working using jQuery. Is this achievable using CSS only?
Demo 3
You can letterbox the images with just CSS using transform: translate(-50%, -50%); and width just an overflow:hidden on .imagePosition images will be center aligned vertically and horizontally.
.galleryArea .imagePosition img {
width: auto;
max-width: inherit;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
}
Example fiddle - http://jsfiddle.net/v6q426bp/11/
You can also add either height:100% or width:100% to the image to restrict the layout even more.
With height:100% - Same as the link above or below with a 12 (unable to add more then 2 links)
Width width:100% - http://jsfiddle.net/v6q426bp/13/
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>