I am trying to get an array of images of varying aspect ratios to fit nicely inside a modal - that is the modal will have a larger height for vertical images and smaller height for horizontals. I therefore do not want to specify a height in the graphql query because the images should scale down to fit their container.
const data = useStaticQuery(graphql`{
allFile(filter: {sourceInstanceName: {eq: "images"}, ext: {eq: ".jpg"}}) {
nodes {
id
name
relativeDirectory
childImageSharp {
original {
height
width
}
gatsbyImageData(quality: 100, layout: CONSTRAINED)
}
}
}
}
`);
I have passed the photos into a modal, a carousel, and a dummy div with height of 300pixels and the result is always the same: the images are huge and cropped to fit the container. When I set max height in the query to 500 pixels, everything works fine, but the verticals are much too tiny for the modal. When I set height on GatsbyImage directly, the images are the right size, but something is adding (Gatsby Image wrapper?) 1000 or so pixels of padding on the left and right sides of the image.
Carousel styles:
<div
ref={scrollContainer}
tabIndex={0}
css={`
max-width: 100vw;
max-height: 60vh;
overflow-x: auto; etc...
GatsbyImage styles:
<GatsbyImage
alt=""
objectFit='contain'
// above doesn't work
image={getImage(photo)}
key={photo.id}
// style={{ height: '60vh' }}
//above works but adds excessive padding somewhere
imgStyle={{ objectFit: 'contain' }}
//above doesn't work
/>
Related
I've created a pile of images on which you click through. By clicking the top image it moves the z-index back by the amount of images. These images need to have a shared description. If I put position:absolute on them (to stack them). The description also gets stacked. Is there a way to keep them it under the images?
.image-pile {
position: relative;
}
.images img {
position: absolute;
width:300px;
}
https://jsfiddle.net/td59pr1h/
The .image-pile had no height because the content was positioned absolute. Fixed it by calculating the height in javascript.
var imgheight = $( ".images img" ).innerHeight()
$('.images').css('height', imgheight)
I have a Image with a simple clipping Rect ( rotate 30 degree with size 200x200 to make a small view part of image ). My problem is how to prevent Image move or scale outside clipping rect ( that mean Image need alway include entire clipping Rect )?
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// create a clipping path
var rectClippingPath = new fabric.Rect({
top: 100,
left: 200,
width: 200,
height: 200,
fill: 'red',
angle: 30,
absolutePositioned: true
});
// create image
var newImage = new fabric.Image();
newImage.clipPath = rectClippingPath;
canvas.add(newImage);
newImage.setSrc('http://fabricjs.com/assets/pug_small.jpg', (imageObject) => {
newImage.set({ left: 50, top: 50});
canvas.setActiveObject(newImage);
newImage.setCoords();
canvas.requestRenderAll();
})
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js" integrity="sha512-XcwgBTqf2CXR/nsswCV1e0j9CjXo87APyBsATK2/l7MvTpcIG0QYKA87v5KIJ4RS6ytArv2pWD6UcRorKhYp1A==" crossorigin="anonymous"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
And here are some example cases:
Here is expected result:
Thank you!
I can't see a way to achieve it based on your example. I think it needs a structural change. You can do it by having a parent element with all controls and then a child element (image object).
Whenever you move the parent frame you should force the photo to move by the same amount, whenever you scale the frame you should also proportionally scale the child photo, same with rotation.
Let's say you rotate the parent frame, now in order to manipulate the photo inside you will need some kind of activating trigger: double click or a button. That will make sure you are not moving the parent frame, but the child.
While you move the child photo you will need to force it to stay contained within the parent frame borders. This is not hard if both elements have a rotation of 0, 90, 180, 270, 360 degrees. It is much harder to make it nice and smooth for all other rotation angles. You can find a working, but not perfect solution here: Contain a rotated object inside another rotated object FabricJS. I also started working on a smoother solution for that, but it is not completed https://codesandbox.io/s/force-contain-of-object-inside-another-object-fabric-js-v3-j38sz.
Implementing this solution you will most probably encounter also an issue having with rotating. It's easy to rotate an child image and the parent if they have the same origin point, but if you move the child and try to rotate the parent, then you will need to rotate them considering a different origin point. Here is a solution to this: https://codesandbox.io/s/rotation-of-an-object-with-different-rotation-origin-fabric-js-362-8m4cb?file=/src/index.js
You can also visit this platform and have look at similar ideas https://diamondphoto.co.nz/. It is build in Fabric JS version 3.
I have a xychart with labels on the y axis. Every second label is being hidden:
Google suggests that I can set:
valueAxis.autoGridCount = false;
and:
valueAxis.gridCount
to the number of grids required by the data.
...but it doesn't have any effect, autoGridCount seems to be missing in the V4 documentation and there is no mention of it being removed.
How can I programmatically set gridcount?
EDIT: JSFiddle here
As you already figured out you can use axis.renderer.minGridDistance to show all labels:
categoryAxis.renderer.minGridDistance = 0;
To adjust the row height you can use series.columns.template.height to adjust the height of each element. I would suggest to set it to 100% and set a small border to the items:
series.columns.template.stroke = am4core.color('#fff');
series.columns.template.strokeWidth = 1;
series.columns.template.strokeOpacity = 1;
series.columns.template.height = am4core.percent(100);
To adjust the row height I would recommend increasing the chart height in general, because amcharts is trying to display all data in the area you provide. So increasing the height of the chart will cause all rows to have equal height and fill the provided area.
If you have varying data and don't know the number of rows, you can set the height of the chart dynamically according to the length of your data array and use an html scrollbar:
JavaScript:
document.getElementById('chart').style.height = `${chart.data.length * 50}px`;
HTML:
<div class="container">
<div id="chartdiv"></div>
</div>
CSS:
.container {
max-height: 300px;
overflow-y: auto;
}
#chartdiv {
min-height: 200px;
}
Here I created a code pen to show my suggestion.
I want to upload one file and set the width and height to fit in a given div, depending on the file size. e.g.:
div size: width: 600px, height: 300px
img size: width: 1200px, height: 400px
the thumb gets created with width 600 and height 300 (by using thumbnailWidth and thumbnailHeight options)
on success I receive the filesize. In the example case I let the width of the image and div at 600px, but I want to change the height to 200 (So that the image doesn't get deformed)
My problem now is that the image src (data) still has a width of 300px
Any ideas how to fix that? THANKS!
Change the resize fonction like this:
https://github.com/enyo/dropzone/issues/236
,
resize: function(file) {
var info;
// drawImage(image, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight) takes an image, clips it to
// the rectangle (srcX, srcY, srcWidth, srcHeight), scales it to dimensions (trgWidth, trgHeight), and draws it
// on the canvas at coordinates (trgX, trgY).
info = {
srcX:0,
srcY:0,
srcWidth: file.width,
srcHeight: file.height,
trgX:0,
trgY:0,
trgWidth: this.options.thumbnailWidth,
trgHeight: parseInt(this.options.thumbnailWidth * file.height / file.width)
}
return info;
},
This is the code I have:
<a class="image_show" href="#"></a>
.image_show:
background-image: url("/images/img.png");
display:block;
}
. image_show:hover {
background-image: url("/images/img2.png");
display:block;
}
The above solution doesn't display the image unless there is text in there. How can I show my image without text in the anchor tag?
Do
.image_show {
display: block;
width: 123; // width of your image
height: 123; // height of your image
}
You could also use inline-block. This more closely resembles how a normal image would fit in a page.