I am using this library https://github.com/img-mapper/react-img-mapper
I have an image that has a 15k x 8k dimension, which I can normal resize with an img component.
However, using the library's component I cannot resize it. I tried the 3 following resizing methods.
-I tried to resize the parent div with width and height.
<ImageMapper src={sampleIMG} map={MAP} imgWidth={200} natural /> and
<ImageMapper src={sampleIMG} map={MAP} imgWidth={200} natural />
Did you tried with width (Image width, in function you will get image reference object) or parentWidth (parent max width for responsive) ?
<ImageMapper
src={URL}
map={MAP}
width={props.width} // dynamic width
height={props.height} // dynamic height
imgWidth={props.imgWidth} // dynamic imgWidth
natural={props.natural} // dynamic natural
responsive={props.responsive} // dynamic responsive
parentWidth={props.parentWidth} // dynamic parentWidth
/>
Related
Is there a way to preserve image proportions when using an tag?
The docs mention hard coding the dimensions but that's problematic when requesting arbitrary images
https://aframe.io/docs/0.6.0/primitives/a-image.html
as far as i see, the a-image is just a a-plane with an image source in a material.
It means the image will be streched over the plane, you can only mess with the
<a-image> height and width, which are the a-plane's height and width in meters,
<img> height and width, which specify the image dimensions in px, but the image still will be streched over the plane.
You could try to do it automatically, within a component, setting the a-planewidth and height depending on the input <img> width and height, having a px-meters ratio:
AFRAME.registerComponent('imageSetter',{
schema:{
img:{type:'selector'}
},
init:function(){
let lowResRatio = 0.01;
this.el.setAttribute('height',this.data.img.height*lowResRatio);
this.el.setAttribute('width',this.data.img.width*lowResRatio);
}
});
Check it out in my fiddle: https://jsfiddle.net/gftruj/5d9j9nqm/2/.
Otherwise, You need to prepare the images earlier on.
UPDATE
You can modify the component so it gets the image dimensions, gets a height/width ratio, and sets the width and height accordingly:
AFRAME.registerComponent('foo',{
schema:{
img:{type:'selector',default:''},
height:{}
},
init:function(){
let data = this.data;
let ratio = 1/100;
this.el.setAttribute('width',data.img.width*ratio);
this.el.setAttribute('height',data.height);
this.el.addEventListener('materialtextureloaded', (e)=>{
var w = e.detail.texture.image.videoWidth || e.detail.texture.image.width;
var h = e.detail.texture.image.videoHeight || e.detail.texture.image.height;
let ratio = w/h;
this.el.setAttribute('width',data.height*ratio);
});
}
})
live fiddle here: https://jsfiddle.net/5d9j9nqm/4/
Now it's fixing itself to a given height.
My intention is, having a Container, with a predefined width, made scrollable if the sprites inside occupy more width than the container.
Currently, if i set the width after adding all the sprites, the contents are automatically resized, which is not i wanted.
Sample code:
var container = new PIXI.Container();
container.width = 150;
stage.addChild(container);
for(var i=0;i<5;i++){
var eachImg = new Sprite("xxx.png"]);
eachImg.x = i*50;
container.addChild(eachImg);
}
How to code achieve such an effect?
Containers themselves don't really have a width and height... those values are just the overall dimensions based on where it's children are. Changing the width and height just changes the scale of x and y.
There's a WIP for a scrollable container https://github.com/pixijs/pixi-ui
and https://github.com/Ezelia/EZGUI also shows some effects of scrolling containers.
I have a small image in my project that I would like to resize responsively any time the resolution changes. I am currently using the class "img-responsive". With this class, the picture doesn't start resizing until the window reaches its edge. In this case, since it's a relatively small picture, this never happens.
Is there a built-in Bootstrap class I can use to have the image resize responsively at all times?
I ended up using JavaScript
$(window).resize(function(){
if($(window).width() < 1100){
var width = $(window).width();
var ceiling_width = 1100;
var difference = ceiling_width - width;
var decrease = difference * 0.2345;
var full_logo_width = 404;
var new_logo_width = full_logo_width - decrease;
$("#my_logo").css({"width": new_logo_width});
}
});
If the browser's width gets lower than 1100px then the picture will start shrinking. My image has a width of 404px by default (if the browser loads with a width of more than 1100px). I wanted the smallest possible width for the image to be a little over 200px. The per pixel decrease to per window width decrease variable (0.2345 in this case) was calculated based on this. I used the following CSS to set an upper and lower limit for the image's width.
#my_logo{
max-width: 404px;
min-width: 210px;
}
my website sidebar widgets look fine when I view www.aryaziai.com from my desktop. However, The ONLY issue I have is that when I view my mobile version of my site, the "featured video" sidebar sticks out of the frame and overlaps a bit with the black background.
At the end of the day I don't want to manually change the width/height of the youtube video, I just want the width of the "featured video" widget to automatically resize to the size of widget title (the blue block thing).. Its interesting because the size of the youtube video is the same as the widget title when viewing on a desktop, but the widget title remains at a perfect size in the mobile..
Any 100% width codes out there that can fix this? Thanks
If I understand correctly, you're having a problem getting your YouTube video to adjust to the screen width even if the div you're wrapping it in is correctly resized. If so, please read Chris Coyier's article on resizing YouTube videos.
You can do all of this in jQuery (if you're using it), here's Chris' code:
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});
I am trying to achieve a layout like this:
where:
Navbar is just a bootstrap-like top menu, 60px of height, always on top
Pop-up menu is fixed in that position (not always visible), always on top
The entire free area (windows w.o. navbar) is filled with Canvas.
Live example: jsFiddle
I have a problem with Canvas. I currently have a simple style:
<canvas id="le_canvas">Y U NO CANVAS</canvas>
...
#le-canvas {
position:absolute;
width:100%;
height:100%;
}
and the canvas is filling the background, but:
the resolution is very low
it doesn't maintain ratio during window resizes.
What I'd like (if it is possible):
full resolution of the area to fill (1:1 pixel on canvas and on screen)
set the ratio of the area to fill
bonus: update the above after window resize
Setting the canvas element in per-centage will not set the actual canvas size which must be set in absolute pixels. What happens here is that you get a canvas with a default size which then is stretched by the html-rendering giving the blurry look.
You therefor need to set the size by using f.ex. the window's sizes in absolute pixels.
You can do this like this (update of fiddle here: http://jsfiddle.net/x5LpA/3/ ) -
Create a function that sets the canvas size based on window size (you will of course need to subtract height of bars etc, but to show the principle):
function initCanvasArea(cnv) {
cnv.width = window.innerWidth;
cnv.height = window.innerHeight;
}
As the canvas content are cleared when the canvas is re-sized you need to render the content again for each time. Therefor it will be smart to extract the render content into a separate function like f.ex:
function renderCanvas(ctx) {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0, 0, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(20, 20, 55, 50);
}
Now, make the main function a self-invoking one where you also attach an event handler for windo.resize to update the canvas:
$(function () {
var canvas = $('#le_canvas')[0];
var ctx = canvas.getContext('2d');
initCanvasArea(canvas);
renderCanvas(ctx);
window.onresize = function(e) {
initCanvasArea(canvas);
renderCanvas(ctx);
};
})();
And finally edit the CSS-rule by removing the width/height set to 100%;
#le_canvas {
position:absolute;
}
(Tip: a better approach here is to use the fixed attribute for position - plus use a wrapper element, padding, box-sizing.. but that is out of scope for this question).
Is this what you are after? I used $(document).width() and $(document).height() to get the width and height for the rectangle. http://jsfiddle.net/x5LpA/1/