Image max crop percentage - javascript

I'm building an responsive Image gallery using flexbox.
I want to make it respect aspect ratios, and still aim a 100% page with.
The term page in this case is equal to the parent container.
Parameters I want:
Aim for page with of 100% (exept don't force it if a image is upright and will be forced to crop more than 35% of the image)
If widescreen/landscape try to scale it to max-page width and still respect to not crop more than 35% of the image horizontal or vertical in total.
Max row height of around 25vh
-All rows don't need to have equal heights.
Problem
It's always cropping images way too much. So the main content is often not visible.
How can I avoid cropping it more than a defined percentage?
My approach so far:
<div className="App">
<div className="gallery__container">
{images.map((i) => (
<div className="gallery__image__container">
<img className="gallery__image" src={i} alt="ginger" />
</div>
))}
</div>
</div>
.gallery__container {
display: flex;
flex-wrap: wrap;
}
.gallery__image__container {
height: 25vh;
flex-grow: 1;
border: 3px solid transparent;
}
.gallery__image {
max-height: 100%;
min-width: 100%;
max-width: 100%;
object-fit: cover;
}
To clarify my problem I made a simplified example code sandbox:
https://codesandbox.io/s/adoring-spence-4qtc3?file=/src/App.js

Related

Canvas rendering resolution - how to use a canvas in a flex layout

I'm using a flex environment to automatically scale a container with fixed sides and header (header loaded using jquery on document ready).
--------------
| header |
--------------
| |canvas| |
| | | |
--------------
There are 2 flex environments, one from the top to bottom (column) and one from left to right (row).
This seems to work normally when not taking the canvas into account.
As the canvas is scaled when the page loads and the flex is applied, its size changes while leaving the context's "render" width/height the same. This leads to the image being rendered at a small resolution and getting stretched.
To solve this issue, before rendering I run this function each time:
Map._resizeCanvas = function (canvas) {
let displayWidth = canvas.clientWidth;
let displayHeight = canvas.clientHeight;
if(displayWidth !== canvas.width || displayHeight !== canvas.height) {
canvas.width = displayWidth;
canvas.height = displayHeight;
}
};
This most of the time works but leads to an image that is strechted by a few pixels (along X).
Sometimes it causes the header to disappear or increase the page height therefore adding a scroll bar.
How can I use a canvas inside of a flex environment? Is there something I need to take into account when I set the canvas width? (like margins, paddings, I already set the display style to block, inline broke the entire paage)
Is there a way to set the context's rendering resolution without changing the layout and affecting the page?
HTML:
<body>
<div id="header-navigation"></div> <!-- set by jquery on document ready -->
<div id="page-container">
<div class="container" id="container1">
abc
<div style="height: 50pt;"></div>
</div>
<div class="container" id="container2">
<canvas id="canvas1" style="width: 100%; height: 100%; display: block"></canvas>
</div>
<div class="container" id="container3">
abc
<div style="height: 50pt;"></div>
</div>
</div>
</body>
CSS:
html,
body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
p {
margin: 0;
}
#header-navigation {
overflow: hidden; /* FIXME, in the flex environment, this also overflows in width */
flex: 0 1 auto;
}
#page-container {
margin: 5pt;
flex: 1 1 auto; /* part of the column flex layout */
display: flex; /* contains the row flex */
flex-flow: row;
}
.container {
height: 100%;
margin-left: 5pt;
margin-right: 5pt;
}
#container1 {
background: lightgray;
flex: 0 1 15%;
}
#container2 {
flex: 1 1 auto;
}
#container3 {
background: lightgray;
flex: 0 1 15%;
}
#canvas1 {
width: 100%;
height: 100%;
}
My main issue was the shrink value in the flex parameter. It allowed the top bar to vanish on decreasing the page size.
I didn't find a way to solve the issue of the canvas rendering resolution not exactly matching it's actual size, so lines sometimes still blur. Setting the canvas' shrink option to 0 mostly solves this, but the rest of the UI breaks then. I suspect it is caused by the Element actually having a non integer width which isn't represented by the clientWidth/offsetWidth parameters.

react-responsive-carousel: How to display portrait orientation images while preserving aspect ratio and minimizing cropping?

I have a dynamically generated slideshow with various sizes of images - a few are portrait orientation. The issue is that react-responsive-carousel (https://www.npmjs.com/package/react-responsive-carousel) crops the portrait-orientation images more than I would like, only showing about 50% of the image.
The desired behavior is for the portrait images to be 100% of the slideshow height, while being horizontally centered, therefore completely in view (possibly with some empty space on each side.) Landscape images currently look fine, as they stretch 100%, across the width of the container.
<div className="carousel-container">
<Carousel showThumbs={false} showStatus={false}>
<img src="https://placekitten.com/300/200" />
<img src="https://placekitten.com/202/300" />
<img src="https://placekitten.com/302/200" />
</Carousel>
</div>
CSS can be used to modify the DOM nodes generated by react-responsive-carousel as follows:
.carousel-container {
position: relative;
max-width: 432px;
max-height: 289px;
.carousel {
.slide {
img {
height: 100%;
width: auto;
}
}
}
}

How to center an img tag into div tag when I resize the browser?

I am new to web development and I love it, but I've have encountered a problem and I can't figure it out.
I really want my images inside of my div element to be like : http://jsfiddle.net/eb51hxj1/ when i resize the browser.
<div class="divImage">
<img id="image"> </div>
<div>
My code is :
https://jsfiddle.net/a2bsarfb/
Flexbox is your friend!
.divImage {
display: flex;
justify-content: center;
align-items: center;
}
align-items centers the div content along the cross-axis (vertically, in this case), justify-content centers the div content along the main axis (horizontally).
Remove one or the other if you so desire.
You should use var
less code and make more
var divImage = document.getElementById('divImage');
....
divImage.style.backgroundImage = "url("+nextImage+")";
...
divImage.style.opacity = opacity;
remove img tag and put
<div class="divImage" id="divImage"><div>
and css
background-repeat: no-repeat
.divImage {
max-width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*background-image: url(...)*/
}
You can just set the max-width of the .divImage to be 100%:
.divImage {
max-width: 100%;
}
Just be careful of sizing, because the height will change to keep the size ratio the same. If you explicitly set the height, the resizing won't happen, but the ratio might look weird as you resize.
Since block-elements always try to take up the full width of their parent you can use that to your advantage.
#image {
display: block;
margin: 0 auto;
}
That's also how the Fiddle you linked did it.

Make different size images fit into thumbnails for gallery in CSS or JS

Not sure if my question explains this well.
I have a website and need to display all of my images in a gallery. The problem that is that I have 2 types of image sizes which are consistent.
1) - 1200 x 1800 px
2) - 1200 x 800 px
I want my gallery to look similar to this:
And when you click the image they open up as their full size. I can do this part and make them open as full size, but my problem is trying to get these two different size images look right in the box layout.
When using 1 size I could make them a fixed width and height and then just hide the overlay to make them all square shaped. However when i introduced the other image size into the mix , images begin to look stretched.
Does anyone know how I can achieve this using either pure CSS or Javascript/jQuery?
Try to add
#your_gallery img {
max-width: 30%;
margin: 15px 1.5%;
min-height: 180px;
max-height: 180px;
}
Try this code
.panel-block {
float: left;
width: 100%;
}
.panel-img {
float: left;
width: calc(100%/3 - 20px);
height: 141px;
overflow: hidden;
margin: 10px;
display: flex;
align-items: center;
background-color: #c5c5c5;
}
.panel-img img {
width: 100%;
}
<div class="panel-block">
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x1800/ddd/fff"/>
</div>
<div class="panel-img">
<img src="https://dummyimage.com/1200x800/ddd/fff"/>
</div>
</div>
I think that the best way to solve this is to generate the square thumbnails for the images.
You don't need weird JS/CSS, everything is simpler and you avoid to load the full size images directly in the gallery (so everyone with a data plan would be happy and the page will load a lot faster)

Change the width of the images according to aspect ratio

I am building a comic reading website. I got a problem with displaying images. Most of my images are having the aspect ratio of 2/3. Means 1000x1500. So I am displaying them with below css rules. But there are some images like double page images. So when the css rule max-width=728px is applied this 4/3 raito image can't read anything. So basically I want to change the css rule for max-width=728px when the user came across to 4/3 ratio images. Css rule max_width=728px still have to apply the 2/3 ratio images but when the ratio changes to 4/3 it has to be max-width=1250px. What do i need to do for solving this? It is related to css or need some javascript. This manga website has this future I think. Double page images are displaying width of ~1300 and when i shrink the browser its javascript updating the width and height.
Example:http://www.mangaeden.com/en/en-manga/berserk/344/17/
My website:http://mangabozok.com/oku/Berserk/346/5
HTML:
<div class="gnc02">
<img src="paths">
</div>
CSS:
.gnc02 img {
display:block;
margin:auto;
max-width: 728px;
height: auto;
}
You can try the following style:
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
For the 2:3 images, the max-height applies and restricts the width to 728 pixels. For the 4:3 images, the max-width applies and restricts the width to 1250 pixels.
.gnc02 img
{
display: block;
margin: auto;
max-width: 1250px;
max-height: 1092px;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
<br/>
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/d6/d6afc1d18c0c08d6129f121a3531f47933d8fdbccca0ea7f78ed10e8.jpg" />
</div>
Note: when running the code snippet, you should switch to "Full page" mode.
.gnc02 {
max-width: 728px;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
float:left;
}
try this
.gnc02 {
width: 99% !important;
display:block;
margin:auto;
}
.gnc02 img {
max-width: 100%;
}
<div class="gnc02">
<img src="http://cdn.mangaeden.com/mangasimg/82/82018e71734a3893bc60f2e3a5df4520b1343c862ef09e3c7b30fd1d.jpg" />
</div>
this code is used for responsive designing. I think this may help you in any type of image or the size of the image.

Categories