Develop Reference

Zoom & crop an image and draw an svg-square on top (in angular)

"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!

Managed to solve it myself. stackblitz updated with a working solution.

Prevent chrome from changing text size

There is an option in chrome that lets you change default font size (Small, Medium, Large, Very Large) and appearently the
-webkit-text-size-adjust:none;
line isn't supported anymore. Is there any other way I can prevent chrome from changing font size?

Chrome as any other browser has default values for how elements should look.
The best way to get what you want is to implement a css script that resets all the different elements to values you know, and from their set the elements to a new desired value.
h1,h2,h3,h4,p,a {
font-size: 50px;
}
You can also implement media-queries to change behavior as viewport change.

What you want to do, probably, is to operate backwards: instead of preventing the page to change the fonts size, you might want to re-calculate it based on the zoomed level in the user's window.
Have a look at this question, you can try to use the described methods to detect the zoom level in the browser and apply a "counter-zoom" to reset it to your default font-size: How to detect page zoom level in all modern browsers?
E.g.:
If the users zoom at 120% you want to set your font-size to 83.3333%
The formula is simply
function yourFontSize(zoomLevel){
return 100/zoomLevel*100
}
More examples:
If the users zoom at 110% yourFontSize(110) // returns 90.9090909090909
If the users zoom at 120% yourFontSize(120) // returns 83.33333333333334
If the users zoom at 150% yourFontSize(150) // returns 66.66666666666666
And so forth

Try this with jquery, I force the font-size to a specific size. Open your page, right click for Inspect. Minimize-maximize and when the text shrinks, at the top right corner you will see the screen size, force it like this:
$(window).resize(function() {
if ($(window).width() > 400 && $(window).width() < 1000)
$('#myParagraph').css('font-size', '40px');
});

Wordpress setting image height on import

I am having a bit of trouble with an unfamiliar wordpress theme. My featured images are all 870 x 550 and yet when i put them in they are resized to 870 x 490, with an ugly crop. I have found a couple of CSS entries with a value of 490px so I changed them to 550px (see code snippet).
div.featured-media-container {width:870px; height:550px;}
div.featured-media-container img {width:870px; height:550px;}
This has made the container the right size, and resized my image to fill it, but the crop still remains so the image is stretched. How do I stop them being cropped when I drop them in?
Thanks.
Oh, here's the page in question: http://www.decentdesign.co.uk/portfolio/east-wing-coffee/

You Just DO one thing from your wp admin panel
go to settings > Media
and change the size according to your nedd. For reference take a look of below attached image
that's it Very Simple

Image loader animation for Large Images

I have some high-res images in a gallery on my site, and all I want some sort of animation like what can be found at ajaxload.info, to display in place of my image until it is fully loaded. Some its suggest its as simple as adding something like this to your css:
img { background:url('../images/ajax-loader.gif') center center no-repeat;}
Well for one this adds this background image to my transparent 'spacer.gif' resulting in the loading image showing up where my spacer is. However this 'method' doesn't even work to begin with. When I view the high-res images they still load from top to bottom, and I don't even see the loader.gif. Any help? I thought there was information on this everywhere, but for the life of me I can't find it.

just give all the high res images a class and then in the css use the class name instead of the global img tag to have the background set to.
If you use jquery to load the images then the images won't load from the top down but will only appear when it's fully loaded, so the background loader image will be visible and once the image has fully loaded and is displayed the loader will be covered. This method works pefectly as it's so simple, you were probably just missing something out.

asp.net image display as a percentage

I have a page that accepts image uploads up to 4MB. The images can be as small as 100x100 or even as large as 1900 x 1200. I'm using a pop-up window to display the uploaded image.
The problem is that I want to scale the larger images programmatically (but not modify the image itself). I want to display the large images at 80% (or 60% or whatever) if possible. I've seen browsers display an image at XX % then when you click on an icon, then the image will be displayed at 100%.
That's the effect I'm trying to accomplish.

I would use the code located http://www.codeproject.com/KB/GDI-plus/imageresize.aspx
Then I would onclick of an icon pass the percentage value to that function and the render the result.