Responsive képek WordPress alatt

Hogyan alakíthatjuk át a képeket responsive megjelenésűvé?

Ha szeretnéd, hogy a táblagépeken, okostelefonokon a képernyő méretéhez igazodva jelenjenek meg a honlapod képei, akkor a következő néhány lépést kell megtenned.

A functions.php-t egészítsd ki ezzel a kóddal:

function responsive_images($atts, $content = null) {
return '

';
}
add_shortcode('responsive', 'responsive_images');


A style.css-be írd be ezeket a sorokat:

@media only screen and (max-width:767px) {
.image-resized img {
width:100%;
height:auto;
}
}
/* 240px screens */
@media only screen and (max-width: 319px) {
.image-resized img {
width:240px;
height:auto;
}
}
/* 320px screens */
@media only screen and (min-width: 320px) and (max-width: 479px) {
.image-resized img {
width:320px;
height:auto;
}
}
/* 480px screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.image-resized img {
width:480px;
height:auto;
}
}


Végül a bejegyzésben használd a következő módon:

<img src="image_url" alt="alt" title="title" />