Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

syntax for srcset in react

import nat1 from "./img/nat-1.jpg";
import nat1Large from "./img/nat-1-large.jpg";
import nat2 from "./img/nat-2.jpg";
import nat2Large from "./img/nat-2-large.jpg";
import nat3 from "./img/nat-3.jpg";
import nat3Large from "./img/nat-3-large.jpg";


  <div className="composition">
                <img
                  srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 1"
                  className="composition__photo composition__photo--p1"
                  src={nat1Large}
                />
                <img
                  srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 2"
                  className="composition__photo composition__photo--p2"
                  src={nat2Large}
                />
                <img
                  srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 3"
                  className="composition__photo composition__photo--p3"
                  src={nat3Large}
                />
  </div>
Comment

PREVIOUS NEXT
Code Example
Javascript :: add new element useState array 
Javascript :: How to loop through an object in JavaScript with a for…in loop 
Javascript :: text field material ui max input for number 
Javascript :: process env react undefined 
Javascript :: get last two digits of year javascript 
Javascript :: find largest number from an array in JavaScript 
Javascript :: jquery force page to reload on viewport resize 
Javascript :: javascript number between values 
Javascript :: gsap pin scrolltrigger 
Javascript :: javascript pass parameter to event listener 
Javascript :: extract uppercase words nodejs 
Javascript :: using async in useeffect 
Javascript :: javascript array 
Javascript :: js ternary 
Javascript :: nuxt emit 
Javascript :: iterate object 
Javascript :: como actualizar nodejs 
Javascript :: google map in react js 
Javascript :: react public pic 
Javascript :: add value to array javascript 
Javascript :: how to find last element of array react 
Javascript :: redirect all request http to https express js 
Javascript :: js set canvas size 
Javascript :: datatable get row data 
Javascript :: jquery show password 
Javascript :: count array filter javascript 
Javascript :: urlencoded limit 
Javascript :: placeholder in angular 9 select 
Javascript :: puppeeter mac m1 
Javascript :: javascript example of foreach loop 
ADD CONTENT
Topic
Content
Source link
Name
2+4 =