Sujets similaires

Salut!
Je tiens à faire cette mais il ne fonctionne pas: https://i.imgur.com/HmD64Ow.png

J'essaie de cette:

Code:: .resizeimage{ height:50px; width: 50px;}

Est-ce possible?

Salut

Ton image, si tu lui imposes un hauteur de 50px, elle va se réduire pour faire 50px de hauteur, tout en gardant les bonnes proportions en largeur.
Si tu mets 50px de largeur, elle va se réduire en hauteur pour s'adapter ^^
Par contre, si tu imposes les 2, bah ça va faire une déformation bizarre horrible et tout et tout.

Est il très important que ce soit une image (utilisation de la balise img en HTML), ou bien cela peut il être une image placée dans un block en fond avec background-image ? Si tu ne comprends pas trop ma question, où vas tu utiliser ce code ^^ ?

Merci pour votre réponse!

Je me sers de ce code avec jQuery, jcarousellite. Désolé pour mon français, je vais essayer de vous expliquer ce que je veux avec des images.

Je veux que ce changement : https://i.imgur.com/VnnrJQ7.png

mon CSS:

Code:: #twnews-demo { width:280px; background:#2e2d2c; font-family:Verdana,Arial,Sans-Serif;font-size:10px;border-radius:20px;}
#twnews-demo a { text-decoration:none; }
#twnews-demo img {opacity:0.6;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo img:hover {opacity:0.9;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo .title { font-size:13px;text-transform: lowercase; font-family:arial, sans-serif;color: #9f9f9f;
text-align:center;padding:10px;letter-spacing: -1px; font-weight:bold;}

.twnews { width:270px; }
.twnews ul li{ list-style:none; display:block; padding-bottom:3px; margin-bottom:5px;}
.twnews .thumbnail {padding-right:8px;}
.twnews .thumbnail img{ opacity:0.5; float:left; width:43px;border:2px solid #1d1d1d; border-radius: 10px; }
.twnews .thumbnail img:hover{ opacity:0.8; float:left; width:43px;border:2px solid #1d1d1d; border-radius: 10px;}
.twnews .info { font-size:9px; padding:2px;}
.twnews .info span.cat { display: block; float:right; font-size:7px; color:#808080; text-transform:uppercase; }

mon HTML:

Code:: <div id="twnews-demo">
<div class="title"><img src="http://l1307.hizliresim.com/1c/m/qh461.png">last news</div>
<div class="twnews">
   <ul>


<li>
         <div class="thumbnail">
            <img src="http://i.imgur.com/z7PZSyx.png">
         </div>
         <div class="info">
            Are you a young witch or wizard who has dreams of being an artist, singer, actor?
            <span class="cat">45 gün önce falan belki</span>
         </div>
         <div class="clear"></div>
      </li>
<li>
         <div class="thumbnail">
            <img src="http://u1307.hizliresim.com/1c/m/qgzvl.png">
         </div>
         <div class="info">
            Sick of all this 'bring down the dark arts' bullshit crowding up the high school careers offices?
            <span class="cat">45 gün önce falan belki</span>
         </div>
         <div class="clear"></div>
      </li>

         <li>
         <div class="thumbnail">
            <img src="http://i1285.photobucket.com/albums/a591/GwythyrWynn/telesphore22copy_zps463b67dd.png">
         </div>
         <div class="info">
            On second thoughts, let's not go there. It is a silly place. Yes, if you make it look like an electrical fire. When you do things right
            <span class="cat">45 gün önce falan belki</span>
         </div>
         <div class="clear"></div>
      </li>
         <li>
         <div class="thumbnail">
            <img src="http://i.imgur.com/umrb17F.png">
         </div>
         <div class="info">
            people won't be sure you've done anything at all. It's only a model. You don't vote for kings.
            <span class="cat">45 gün önce falan belki</span>
         </div>
         <div class="clear"></div>
      </li>
         <li>
         <div class="thumbnail">
            <img src="http://u1306.hizliresim.com/1b/f/p38gx.png">
         </div>
         <div class="info">
            the most prestigious and renown school. thats all.
            <span class="cat">45 gün önce falan belki</span>
         </div>
         <div class="clear"></div>
      </li>
</ul>
</div>
</div>

Ah je n'avais pas vu dans ta présentation que tu ne parlais pas très bien français ^_____^

Alors en fait, il faut juste changer le CSS :

Code:: #twnews-demo { width:280px; background:#2e2d2c; font-family:Verdana,Arial,Sans-Serif;font-size:10px;border-radius:20px;}
#twnews-demo a { text-decoration:none; }
#twnews-demo img {opacity:0.6;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo img:hover {opacity:0.9;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo .title { font-size:13px;text-transform: lowercase; font-family:arial, sans-serif;color: #9f9f9f;
text-align:center;padding:10px;letter-spacing: -1px; font-weight:bold;}

.twnews { width:270px; }
.twnews ul li{ list-style:none; display:block; padding-bottom:3px; margin-bottom:5px;}
.twnews .thumbnail {width: 50px; height: 50px; overflow: hidden; border:2px solid #1d1d1d; border-radius: 10px; opacity:0.5;}
.twnews .thumbnail img{ float:left; width: 50px;}
.twnews .thumbnail:hover{ opacity:0.8; border:2px solid #1d1d1d; border-radius: 10px;}
.twnews .info { font-size:9px; padding:2px;}
.twnews .info span.cat { display: block; float:right; font-size:7px; color:#808080; text-transform:uppercase; }

Dis moi si cela marche bien !
Si tu préfères, tu peux parler en anglais Smile

Oh images fait! Merci beaucoup!

Mais les textes ne sont pas bonnes, en dessous de la ligne d'image. T_T
Problème: https://i.imgur.com/SE86eWl.png

Code:: #twnews-demo { width:280px; background:#2e2d2c; font-family:Verdana,Arial,Sans-Serif;font-size:10px;border-radius:20px;}
#twnews-demo a { text-decoration:none; }
#twnews-demo img {opacity:0.6;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo img:hover {opacity:0.9;transition: all, 1s;-moz-transiton: all, 1s;-webkit-transition: all, 1s;}
#twnews-demo .title { font-size:13px;text-transform: lowercase; font-family:arial, sans-serif;color: #9f9f9f;
text-align:center;padding:10px;letter-spacing: -1px; font-weight:bold;}

.twnews { width:270px; }
.twnews ul li{ list-style:none; display:block; padding-bottom:3px; margin-bottom:5px;}
.twnews .thumbnail {width: 50px; height: 50px; overflow: hidden; border:2px solid #1d1d1d; border-radius: 10px; opacity:0.5; float:left; }
.twnews .thumbnail img{ width: 50px;}
.twnews .thumbnail:hover{ opacity:0.8; border:2px solid #1d1d1d; border-radius: 10px;}
.twnews .info { font-size:9px; padding:2px;}
.twnews .info span.cat { display: block; float:right; font-size:7px; color:#808080; text-transform:uppercase; }

Mieux ?

Impressionnant! Merci! Merci beaucoup! <3

Problème resize [Résolu]

Problème resize [Résolu]

Sujets similaires

Sujets similaires

Partenaires Or