We Keep Coding

I want to put width and height directly in the style tag using quill-image-resize-module in vue2-editor

I implemented resize in image using quill-image-resize-module in vue2-editor, but now the width attribute is added to img and I want to copy it to the style attribute.
In the implementation of what I made, the img tag is css with width: calc (100% + 32px);
Because there is a translation and this cannot be corrected, I would like to be able to display something smaller or larger than the specified one by putting the size in the image with style.
It is like this in the current situation.
<img alt src="https://**********" width="100px">
I want to change it like this.
<img alt src="https://**********" style="width:100px">

Try to move the style tag to your css:
.img {
width: 100px !important;
}
or if you use other img tags which should not be adjusted:
Your css:
#yourChoosenId {
width: 100px !important;
}
Your html:
<img alt src="https://**********" id="yourChoosenId">

How to image swap based on screen size?

I recently started experimenting with bootstrap and scaling things to size when the screen is shrunk. If I have an image that needs to be at least 300px to be readable but the screen is only 250px wide (just for example) they would have to scroll left and right to see the whole image. On ford.com they actually swap the larger image out for a similar image that is smaller, more fit for the screen. Then as you drag the screen larger, it switches back to the larger image. Im assuming this has to do with some form of JS and screen size dimensions. Any thoughts?

Technically the feature you're describing could be achieved through either css, html or javascript.
In CSS you can use media queries to load your images through the background property,
.image {
background: url("image.jpg");
}
#media only screen and (max-width: 250px) {
.image {
background: url("alternative-image.jpg");
}
}
or, in case you had both images loaded in the html document, through the display property.
.image {
display: initial;
}
.alternative-image {
display: none;
}
#media only screen and (max-width: 250px) {
.image {
display: none;
}
.alternative-image {
display: initial;
}
}
Read more about media queries here.
In HTML you can use the picture and source elements,
<picture>
<source media="(min-width: 250px)" srcset="image.jpg" />
<img src="alternative-image.jpg" />
</picture>
or the simpler alternative, the srcset attribute.
<img src="alternative-image.jpg" srcset="image.jpg 250px" />
Read more about it here.
Finally, in JavaScript you can use the window size properties to build a function that loads the right image for each size every time the window is resized.
window.onresize = function () {
if (window.innerWidth < 250) {
image.setAttribute("src", "alternative-image.jpg");
} else {
image.setAttribute("src", "image.jpg");
}
}
Read a bit about the window size properties here.
PS. Do NOT directly use these examples, as they are incomplete and unoptimized. Their only purpose is to mock the use of the resources they reference.

this can be archive in 2 ways.
there is a class in bootstrap V3 img-responsive if you add this class in image tag then it will auto resize when viewport is smaller then image size. Reference : http://getbootstrap.com/css/#images-responsive
OR you can use srcset attribute of image tag
example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
in above example you can set image path in srcset in first parameter and on second is image width. in this Browser auto detect viewport width and based on that it will load image.

How can I make image responsive?

am using following code to enlarge image on click...
I have tried for media in css..
http://www.frontendwebhelp.com/javascript/thumbnail-popup-to-large-image.php
But I have added one more class in # modalPopupHtml # to adjust size of large image
.imgsize{
height: 600px;
width: 800px;
}
But now I want to make that large image responsive... when I Test that code on mobile view that time it is not working properly... what should I do to make it perfect fit for mobile screen...

Add bootstrap class (class="img-responsive") to the image element

try this
Max-width:100%;
height:auto;
display:block

by define min and max width using #media in css file
#media (max-width: px)
{
.imgsize{ }
}
#meida(min-width :px)
{
.imgsize{}
}
define px size according to your size

How to make fadeIn() and hide() work only for tablet and desktop versions?

I have the following CSS to keep one of my page elements hidden initially:
#media only screen {
#page-element-1 {
display: none;
}
}
and the following JS to fadeIn the element when another element is clicked.:
$('page-element-2').click(function(){
$('#page-element-1').fadeIn();
}
However I want to fade in the element only on tablets and desktops.
How can I do this?
I did try wrapping the js in something like: if (screen.width >= 769){}. But even with this, when I resize the browser, I do see the #page-element-1 as
element.style {
display:block
}
overrides:
#page-element-1 {
display: none;
}

Expanding on my comment above, rather than trying to apply the effect through JavaScript, instead use CSS transitions to do so, targeting the resolutions you want with media queries and then just use JS to initiate the effect by toggling a class.
Here's a pure JS proof of concept, click on the green div to reveal the red div above:
document.getElementById("shown").addEventListener("click",function(){
document.getElementById("hidden").classList.toggle("shown");
},0);
#hidden{
background:red;
height:0;
}
#media all and (min-width:769px){
#hidden{
opacity:0;
}
#hidden.shown{
opacity:1;
transition:opacity .5s;
}
}
#hidden.shown{
height:100px;
}
#shown{
background:green;
cursor:pointer;
height:100px;
}
<div id="hidden"></div>
<div id="shown"></div>

There's a couple of key factors here.
Make sure you have <meta name="viewport" content="width=device-width" /> in your <head> element.
As #Shaggy said, you need to use media queries for the desired effect.
example:
#media (min-width: 768px) { // tablets can't go below 768px
#someID {
// styles
}
}
Additional media queries here for selected devices
As for your javascript calculating the resize of your browser, this only works on doc load UNLESS you're using resize event.
$(window).on('resize', function() {
// throw your resize code here for whatever you want to hide/show
if (window.screen.availWidth > 768 {
......
}
});
You don't necessarily have to use both the resize event AND the media queries. Once you resize the browser, the media queries will pick up the width and assign styles to the elements.

best way, as others suggested, is using keyframes in css.
if you wanted to do it in javascript, try:
if ($(window).width() < 796) {
//DO STUFF
}

To see the change you should use the mobile emulation available in chrome and firefox, and reload the page. That and use the media queries.

Transparent src so that background shows through

Do you know how to make the source image of an img tag transparent so that one can see the background image through the src image?
Say I have this html:
<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />
I want to somehow target the source image and set the opacity to i.ex. 0.7 .
With jQuery I could copy the src, height and width of the image and manipulate the markup into something like this:
<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
<div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>
But does anyone have a better/simpler suggestion for how to do make this happen? Preferrably without manipulating the markup.

I don't think you can do this with just an <img/>. Try:
<div class="image-wrapper">
<img src="my_image.jpg" height="200" width="300"/>
</div>
.image-wrapper {
display: inline-block;
background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
vertical-align: top;
opacity: 0.7;
}
and a fiddle.

You could try wrapping the image in a <span></span> and setting the background on that, then reducing the transparency of the image. It'd be less awkward than replacing the image with divs.

You could have the image in a div instead of a background, then change the z-index, then you could target it directly in the css.

Why not just make the image partially transparent in an editor, then save as PNG (since JPG doesn't support transparency)? That'd be a lot easier than trying to code a solution.