fixed img width in sidebar?

  • Opgelost cd_BE

    (@cd_be)


    10 jaren, 2 maanden geleden

    Hoi

    Ik ben voor de moment bezig met zelf een thema te schrijven. Ben zo goed als klaar. Enkel nog de sidebar. Maar daar zit ik met een klein technisch probleem.

    Als ik een afbeelding via de sidebar text widget toevoeg heb ik hetzelfde voor als het Azpismis thema. De afbeelding word getoond met zijn volledige grote. Dus bijvoorbeeld
    1024×768 als de sidebar maar een max width heeft van 200px.

    Doe je identiek hetzelfde in het Twenty Fourteen thema. Dan past dit thema de foto zelf aan tot een thumbnail en ziet het er netjes uit.

    De vraag is nu, hoe programmeer je dat?

    Heb de functions.php & style.css van beide thema’s naast elkaar liggen maar kan het er niet uithalen.

    CheerS
    cd_BE

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • marcelvanderhoek

    (@marcelvanderhoek)

    10 jaren, 2 maanden geleden

    Probeer eens in de CSS te zoeken naar max-width: 100% of iets dergelijks.

    Thread starter cd_BE

    (@cd_be)

    10 jaren, 2 maanden geleden

    Dit max-width was er blijkbaar een deeltje van. Maar met deze snippet heb ik het helemaal goed gekregen :).

    /**
 * Responsive WordPress Core Theme Styles
 * http://jeffsebring.com/responsive-wordpress-images/
--------------------------------------------------- */

.sticky,
.bypostauthor,
.gallery-caption {
   display: normal;
}

.alignnone {
   margin: 1em 1em 1em 0;
}

.aligncenter,
div.aligncenter {
   display:block;
   margin: .5em auto;
}

.alignright {
   float:right;
   margin: 0 0 1em 1em;
}

.alignleft {
   float:left;
   margin: 0 1em 1em 0;
}

.aligncenter {
   display: block;
   margin: 1em auto;
}

img,
img[class*="align"],
img[class*="wp-image-"] {
   max-width: 100%;
   height: auto;
}

img.wp-smiley {
   border: none;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
}

img.alignright {
   margin-left: 1em 0 1em 1em;
}

img.alignleft {
   margin: 1em 1em 1em 0;
}

img.aligncenter{
   display: block;
   margin: 1em auto;
}

img#wpstats {
   display: block;
   margin: 0 auto;
}

img[class*="align"],
img[class*="wp-image-"],
   .gallery .gallery-icon img {
   border: none;
}

.wp-caption {
   margin-bottom: 1em;
   margin-left: 0;
   max-width: 96%;
   text-align: center;
}

.wp-caption img {
   display: block;
   margin: 0 auto;
}

.wp-caption-text {
   position: relative;
   font-size: .8em;
}

.gallery {
   margin: 0 auto;
}

.gallery .gallery-item  {
   margin: 0;
   float: left;
   text-align: center;
   width: 33%;
}

.gallery a img {
   border: none;
}

.gallery-columns-4 .gallery-item {
   width: 25%;
}

.gallery-columns-4 .gallery-item img {
   width: 100%;
   height: auto;
}

.comments ol    {
   padding-left: 0;
}

.comments ol li {
   margin: 0;
}

.comment-author {
   padding: 0;
   text-decoration: none;
}

@media only screen and (max-width: 800px) {

   embed,
   object {
      max-width: 100%;
   }

}

@media only screen and ( max-width: 650px ) {

   .gallery-columns-3 .gallery-item {
      width: 33.33%;
   }

   .gallery-columns-3 .gallery-item img {
      width: 100%;
      height: auto;
   }

}

@media only screen and (max-width: 480px) {

   .gallery-columns-2 .gallery-item {
      width: 50%;
   }

   .gallery-columns-2 .gallery-item img {
      width: 100%;
      height: auto;
   }

}

    Nu enkel nog mijn scrollbar wat beter plaatsen en het is klaar! Staat nu een beetje ongelukkig. Had het graag gedaan zoals de jsScroller van Nathan Faubion maar dat lijkt niet te werken.

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘fixed img width in sidebar?’ is gesloten voor nieuwe reacties.