Responsive image sizes

Developer
Corinne Winthrop
Size
8,131 Kb
Views
12,144
  1. Responsive image sizes Previews
  2. Responsive image sizes HTML Codes
  3. Responsive image sizes CSS Codes
  4. Responsive image sizes JS Codes

How do I make an responsive image sizes?

What is a responsive image sizes? How do you make a responsive image sizes? This script and codes were developed by Corinne Winthrop on 08 October 2022, Saturday.

Responsive image sizes Previews
IQ Test

Responsive image sizes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive image sizes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav"> <ul> <li><a href="#">Sizes</a> <ul class="sub-menu sizing"> <li><a href="#" data-type="desktop" data-width="1920" data-height="1080">desktop, 1920 x 1080</a></li> <li><a href="#" data-type="desktop" data-width="1440" data-height="900">desktop, 1440 x 900</a></li> <li><a href="#" data-type="desktop" data-width="1366" data-height="768">desktop, 1366 x 768</a></li> <li><a href="#" data-type="tablet" data-width="1024" data-height="1366">tablet, 1024 x 1366</a></li> <li><a href="#" data-type="tablet" data-width="800" data-height="1280">tablet, 800 x 1280</a></li> <li><a href="#" data-type="tablet" data-width="768" data-height="1024">tablet, 768 x 1024</a></li> <li><a href="#" data-type="mobile" data-width="414" data-height="738">mobile, 414 x 736</a></li> <li><a href="#" data-type="mobile" data-width="375" data-height="667">mobile, 375 x 667</a></li> <li><a href="#" data-type="mobile" data-width="320" data-height="568">mobile, 320 x 568</a></li> </ul> </li> <li class="display"></li> <li class="position"></li> <li><a href="#">Positioning</a> <ul class="sub-menu positioning"> <li><a href="#" data-position="top">Top</a></li> <li><a href="#" data-position="left">Left</a></li> <li><a href="#" data-position="right">Right</a></li> <li><a href="#" data-position="bottom">Bottom</a></li> <li><a href="#" data-position="center">Center</a></li> </ul> </li> </ul>
</nav>
<button class="swap">Swap Image</button>
<div class="demo-parent"> <div id="demo"> <div class="demo__inside"> <div id="hero" class="full"></div> <div class="content"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing</h1> <p>Ergo ita: non posse honeste vivi, nisi honeste vivatur elit. Fadio Gallo, cuius in testamento scriptum esset se ab eo rogatum ut omnis hereditas ad filiam perveniret. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Duo Reges: constructio interrete. Si enim ad honestatem omnia referant neque in ea voluptatem dicant inesse, ait eos voce inani sonarehis enim ipsis verbis utitur-neque intellegere nec videre sub hanc vocem honestatis quae sit subicienda sententia. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Ut vero conservetur omnis homini erga hominem societas, coniunctio, caritas, et emolumenta et detrimenta, quae felmata et blammata appellant, communia esse voluerunt; Nos beatam vitam non depulsione mali, sed adeptione boni iudicemus, nec eam cessando, sive gaudentem, ut.</p> <p> Aristippus, sive non dolentem, ut hic, sed agendo aliquid considerandove quaeramus. Memini vero, inquam; Negat enim definiri rem placere, sine quo fieri interdum non potest, ut inter eos, qui ambigunt, conveniat quid sit id, de quo agatur, velut in hoc ipso, de quo nunc disputamus. E quo efficitur, non ut nos non intellegamus quae vis sit istius verbi, sed ut ille suo more loquatur, nostrum neglegat. Quantum Aristoxeni ingenium consumptum videmus in musicis? Est enim perspicuum nullam artem ipsam in se versari, sed esse aliud artem ipsam, aliud quod propositum sit arti. </p> <h3>Ergo hoc quidem apparet, nos ad agendum esse natos.</h3> <p>Quocirca eodem modo sapiens erit affectus erga amicum, quo in se ipsum, quosque labores propter suam voluptatem susciperet, eosdem suscipiet propter amici voluptatem. Est enim natura sic generata vis hominis, ut ad omnem virtutem percipiendam facta videatur, ob eamque causam parvi virtutum simulacris, quarum in se habent semina, sine doctrina moventur; Hinc est illud exortum, quod Zeno prohgmšnon, contraque quod époprohgmšnon nominavit, cum uteretur in lingua copiosa factis tamen nominibus ac novis, quod nobis in hac inopi lingua non conceditur; Animadverti, ínquam, te isto modo paulo ante ponere, et scio ab Antiocho nostro dici sic solere; </p> <p>Quanta autem ab illis varietas argumentorum ratione concludentium eorumque cum captiosis interrogationibus dissimilitudo! Quid, quod plurimis locis quasi denuntiant, ut neque sensuum fidem sine ratione nec rationis sensibus exquiramus? Ego autem: Ne tu, inquam, Cato, ista exposuisti, ut tam multa memoriter, ut tam obscura, dilucide, itaque aut omittamus contra omnino velle aliquid aut spatium sumamus ad cogitandum; Idne consensisse de Calatino plurimas gentis arbitramur, primarium populi fuisse, quod praestantissimus fuisset in conficiendis voluptatibus? Illa enim, quae sunt a nobis bona corporis numerata. </p> <p>Complent ea quidem beatissimam vitam, sed ita, ut sine illis possit beata vita existere. Non enim hilaritate nec lascivia nec risu aut ioco, comite levitatis, saepe etiam tristes firmitate et constantia sunt beati. Ad eas enim res referre, quae agas, quarum una, si quis malo careat, in summo eum bono dicat esse, altera versetur in levissima parte naturae, obscurantis est omnem splendorem honestatis, ne dicam inquinantis. <b>Nam quid possumus facere melius?</b> Omnibus enim artibus volumus attributam esse eam, quae communis appellatur prudentia, quam omnes, qui cuique artificio praesunt, debent habere. </p> <p>Quod cum ille dixisset et satis disputatum videretur, in oppidum ad Pomponium perreximus omnes. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Laboribus hic praeteritis gaudet, tu iubes voluptatibus, et hic se ad ea revocat, e quibus nihil umquam rettulerit ad corpus, tu totus haeres in corpore. <b>Facete M.</b> Nec enim absolvi beata vita sapientis neque ad exitum perduci poterit, si prima quaeque bene ab eo consulta atque facta ipsius oblivione obruentur. <i>Sed quae tandem ista ratio est?</i> Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente. </p> <p>Cynicorum autem rationem atque vitam alii cadere in sapientem dicunt, si qui eius modi forte casus inciderit, ut id faciendum sit, alii nullo modo. Summum autem bonum si ignoretur, vivendi rationem ignorari necesse est, ex quo tantus error consequitur, ut quem in portum se recipiant scire non possint. <i>Stoicos roga.</i> Aristoteles, Xenocrates, tota illa familia non dabit, quippe qui valitudinem, vires, divitias, gloriam, multa alia bona esse dicant, laudabilia non dicant. Quid tibi, Torquate, quid huic Triario litterae, quid historiae cognitioque rerum, quid poetarum evolutio, quid tanta tot versuum memoria voluptatis affert? Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret. </p> <h2>Triario litterae, quid historiae cognitioque rerum</h2> <p>Ut bacillum aliud est inflexum et incurvatum de industria, aliud ita natum, sic ferarum natura non est illa quidem depravata mala disciplina, sed natura sua. Qui et definierunt plurima et definiendi artes reliquerunt, quodque est definitioni adiunctum, ut res in partes dividatur, id et fit ab illis et quem ad modum fieri oporteat traditur; Id quaeris, inquam, in quo, utrum respondero, verses te huc atque illuc necesse est. <b>Ita prorsus, inquam;</b> Corporis autem voluptas si etiam praeterita delectat, non intellego, cur Aristoteles Sardanapalli epigramma tantopere derideat, in quo ille rex Syriae glorietur se omnis secum libidinum voluptates abstulisse. Atque his de rebus et splendida est eorum et illustris oratio. Et qui ipsi sibi bellum indixissent, cruciari dies, noctes torqueri vellent, nec vero sese ipsi accusarent ob eam causam, quod se male suis rebus consuluisse dicerent. Qui haec didicerunt, quae ille contemnit, sic solent: Duo genera cupiditatum, naturales et inanes, naturalium duo, necessariae et non necessariae. <b>Efficiens dici potest.</b> <b>Idemne, quod iucunde?</b> Sed haec quidem liberius ab eo dicuntur et saepius. </p> <p>Vos ex his tam dissimilibus rebus non modo nomen unum -nam id facilius paterer-, sed etiam rem unam ex duabus facere conamini, quod fieri nullo modo potest. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. </p> <p>Qua exposita scire cupio quae causa sit, cur Zeno ab hac antiqua constitutione desciverit, quidnam horum ab eo non sit probatum; Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Mihi quidem Homerus huius modi quiddam vidisse videatur in iis, quae de Sirenum cantibus finxerit. <i>Sedulo, inquam, faciam.</i> Sive hoc difficile est, tamen nec modus est ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum id, quod quaeritur, sit pulcherrimum. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Quae quidem res efficit, ne necesse sit isdem de rebus semper quasi dictata decantare neque a commentariolis suis discedere. </p> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive image sizes - Script Codes CSS Codes

#demo { position: relative; height: 50vh; width: 80%; margin: 3em auto; background-color: white; box-shadow: 0px 0px 0px 40px black; border-radius: 3px; transition: 400ms;
}
#demo:before { content: ''; position: absolute; display: block; top: -1px; left: -1px; right: -1px; height: 0; background-color: black; transition: 400ms;
}
#demo:after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -2px; display: block; height: 0; background-color: black; transition: 300ms;
}
#demo.desktop { box-shadow: 0px 0px 0px 10px black;
}
#demo.desktop:after { height: 30px;
}
#demo.mobile { box-shadow: 0px 0px 0px 16px black; border-radius: 20px;
}
#demo.mobile:before { height: 30px;
}
#demo.mobile:after { height: 30px;
}
button { display: block; width: 10em; margin: 2em auto 0; padding: 0.5em 1em; border: none; border-radius: 3px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: #ca3c3c; cursor: pointer;
}
button:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}
.demo-parent { position: absolute; left: 50%; transform: translateX(-50%) scale(0.5); transform-origin: center top; margin-top: 2em;
}
.demo__inside { overflow-y: scroll; height: 100%; width: 100%;
}
.demo__inside #hero { height: 400px; background-image: url("http://stage1.zenman.com/responsive-images/no.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.demo__inside #hero.central { background-image: url("http://stage1.zenman.com/responsive-images/central.jpg");
}
.demo__inside #hero.no { background-image: url("http://stage1.zenman.com/responsive-images/no.jpg");
}
.demo__inside #hero.full { background-image: url("http://stage1.zenman.com/responsive-images/full.jpg");
}
.demo__inside .content { padding: 1em 1em 2em;
}
nav { position: relative; z-index: 100; height: 90px; background-color: #4E4E4E;
}
nav ul { list-style: none; padding: 0;
}
nav ul li { color: #94C6D4; transition: 300ms;
}
nav ul a { color: white; text-decoration: none;
}
nav > ul { display: flex; justify-content: space-between; height: 100%; width: 100%; max-width: 1140px; margin: 0 auto;
}
nav > ul > li { position: relative; padding: 2.5em 2em;
}
nav > ul > li:last-child .sub-menu { left: auto; right: 0; text-align: right;
}
nav > ul > li:hover { background-color: #224955;
}
nav > ul > li:hover .sub-menu { opacity: 1; visibility: visible;
}
nav .sub-menu { position: absolute; top: 100%; left: 0; width: 20em; opacity: 0; visibility: hidden; transition: 300ms; background-color: #4E4E4E;
}
nav .sub-menu > li { display: block; width: 100%;
}
nav .sub-menu > li a { display: block; padding: 1em 2em;
}
nav .sub-menu > li:hover { background-color: #367588;
}
.display { width: 272px;
}
.display:hover { background-color: #4E4E4E;
}
.position { width: 122px;
}
.position:hover { background-color: #4E4E4E;
}
html, body { margin: 0; padding: 0; background-color: #DBDBDB; font-family: Verdana;
}
*, *:before, *:after { box-sizing: border-box;
}

Responsive image sizes - Script Codes JS Codes

// screen size
var windowResize = function(){ $sizes = $(".sizing li a"); $display = $(".display"); $demo = $("#demo"); $sizes.on('click', function(e){ e.preventDefault(); $this = $(this); width = parseInt($this.attr('data-width')); height = parseInt($this.attr('data-height')); $type = $this.attr('data-type'); $display .text($type + ': ' +width + 'px, ' + height + 'px'); $demo .removeClass() .addClass($type) .width(width) .height(height + 50) ; });
};
// image position
var adjustPosition = function(){ $selection = $(".positioning li a"); $hero = $('.hero'); $show = $(".position"); $selection.on('click', function(e){ e.preventDefault(); $this = $(this); $position = $this.attr('data-position'); $show .text($position); $hero .css('background-position', $position); });
};
// swap images
var swapImage = function(){ $button = $('button'); $hero = $('#hero'); var myArray = ["Full focus", "Central focus", "No focus"]; var heroArray = ["full", "central", "none"]; var myIndex = 1, heroIndex = 1; $button.on('click', function(){ $this = $(this); $this.text(myArray[myIndex]); myIndex = (myIndex+1)%(myArray.length); $hero.removeClass(); $hero.addClass(heroArray[heroIndex]); heroIndex = (heroIndex+1)%(heroArray.length); });
};
jQuery(function($){ windowResize(); adjustPosition(); swapImage();
})
Responsive image sizes - Script Codes
Responsive image sizes - Script Codes
Home Page Home
Developer Corinne Winthrop
Username cwint
Uploaded October 08, 2022
Rating 3
Size 8,131 Kb
Views 12,144
Do you need developer help for Responsive image sizes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Corinne Winthrop (cwint) Script Codes
Name
Pinned scrolling sections
Crazy Cat Lady Application
A Pen by Corinne Winthrop
Email obfuscation test
Google map with toggle categories
Another animated SVG sequence
Image tiling
Animated SVG sequence
Responsive Image Tiling
VUE
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!