Bonjour,

Je fais appel à votre savoir avant de réellement m'arracher les cheveux !!

Mon problème est simple à priori : j'ai une image rectangulaire 200 x 150 et je souhaite qu'elle s'affiche dans un rond et non sous sa forme originale rectangulaire. (J'espère me faire comprendre). A savoir que sur une ligne, il y aura 4 photos donc 4 cercles d'où la présence d'un <ul> (mais je n'ai pas mis le code en entier, ce serait trop long et inutile je pense)

Voici mon htlm :

<div id="ensemble-produits">

<div class="ensemble">

<div class="container">

<div class="row">

<div class="title">Nos produits</div>



	<ul class="row_team">

<li class="col-lg-3 col-md-3 col-sm-3 ">

<div class="text-center">

<div class="circle-border zoom-in">

<img src="images/logo/test2.jpg" class="img-responsive" alt="Carter en T"/>

</div>

<a href="#">

<h4>Les culasses</h4> 

</a>

</div>

</li>

Le css associé :

.circle-border {

    display: inline-block;

    -webkit-border-radius: 500px;

    -moz-border-radius: 500px;

    border-radius: 500px;

    -khtml-border-radius: 500 px;

    border: 1px solid #fff;
}

.ensemble {

    padding-bottom: 30px;

	min-height: 100px;

	width:100%;

    background: url(../images/x.png) no-repeat center;

	background-size: cover;
}



.ensemble .container {

    padding-top:20px;

    position:relative;
}

.ensemble .title {

      color: #fff;

	 font-weight:500;

	 font-size: 35px;
}

Merci pour votre aide

Bonjour,

et quel semble être le problème ? Tu ne le décris pas. À noter que tu auras plus de chance d'avoir des ronds si tu pars d'images carrées.

Accessoirement,border-radius n'a plus besoin de préfixes depuis longtemps,

C'est à l'image elle-même que tu dois donner le border-radius. Ou alors, donne-lui border-radius: inherit, afin qu'elle hérite de la courbure de son parent.

Dans le HTML, en mettant mon image entre la <div="circle-border">, ca ne donne pas le border-radius à l'image ? 

Sinon comment le coder ? J'ai dû faire une erreur dans l'écriture

C'est exactement ce que je t'ai marqué plus haut par défaut, le border-radius ne s'hérite pas.

Je suis vraiment désolé, mais je n'arrive pas à comprendre vos remarques et les changements à apporter au code =s 

Faisons un essai : fais une copie de sauvegarde de tes fichiers ; puis enlève carrément la div qui entoure chaque image, et reporte ses classes sur l'image en question. Là, on devrait avoir une image sur laquelle un border-radius est directement appliqué. Fais ça et dis-moi ce que ça donne, ok ? (et enlève toutes les versions préfixées de border-radius : -moz, -webkit, -khtml)

Bonjour,

Il est impossible de rendre une image de base rectangulaire en image circulaire (une image ronde), il faudrait une image carré pour ensuite en faire une image ronde. Si j'ai bien compris, tu veux mettre une image dans un rond donc avoir un rond avec ton image à l'intérieur. C'est ça ? 

J'ai une proposition de solution, dit moi si c'est cela que tu recherches

http://codepen.io/anon/pen/RrZEXe

<li class="col-lg-3 col-md-3 col-sm-3 ">

<div class="text-center">
<div class="zoom-in">
<img class="circle-border" class="zoom-in" class="img-responsive"  src="images/logo/test2.jpg" alt="Carter en T"/>
</div>
<a href="http://www.st-ji.com/fr/Moteur.html">
<h4>Les culasses</h4> 
</a>
</div>
</li>

.circle-border {
    border-radius: 50%;
    border: 1px solid #fff;
}

Tu ne peux pas rendre une image rectangulaire, ça découle d'une logique. Un rectangle a une longueur et largeur différente, or un rond à un rayon toujours pareil, et dans ce cas une image carrée peut devenir rond car un carrée a 4 cotés identiques ! 

Du coup, il faut triché un peu, en cachant une partie de ton image, grâce au overflow:hidden; 

J'ai garder le même code html que toi, mais modifier le css.

http://codepen.io/anon/pen/RrZEXe

Sur ton image tu as écrit class="circle-border" class="zoom-in" class="img-responsive" : ce n'est pas comme ça qu'on applique plusieurs classes. Tu l'as fait correctement plus haut, pourtant

Je n'ai pas fait attention aux class effectivement,

@Ka-wette, tu as jeté un oeil sur le lien ?

Ton image est disponible sur internet ? 

Tu peux envoyer la partie html du block, ainsi que le css associé 

Non l'image n'est pas sur internet et je ne pense pas pouvoir la mettre.

Le bloc entier  (fond et les 4 images) ?

Par contre mon code n'est pas très "propre", j'espère qu'il ne va pas vous choquer. Le codage n'est pas mon métier de base et j'apprends sur le tas

Pour info, je n'ai apporté des modifications qu'à la première image, je n'ai pas touché les trois autres. 

<div id="ensemble-produits">

<div class="ensemble">

<div class="container">
<div class="row">

<div class="title">Nos produits</div>

	<ul class="row_team">

<li class="col-lg-3 col-md-3 col-sm-3 ">
<div class="text-center">

<div class="zoom-in">
<div class="test">
<img src="images/logo/test3.png" class="img-responsive" alt="Carter en T"/>
</div>
</div>
<a href="#">
<h4>Les culasses</h4> 
</a>
</div>
</li>

<li class="col-lg-3 col-md-3 col-sm-3 ">
<div class="text-center">
<div class="zoom-in">
<div class="member-thumb">
<img src="images/logo/test1.png" class="img-responsive" alt="member 2"/>
</div>
</div>
<h4> Turbo</h4>
</div>
</li>

<li class="col-lg-3 col-md-3 col-sm-3 ">
<div class="text-center">
<div class="zoom-in">
<div class="member-thumb">
<img src="images/logo/test1.png" class="img-responsive" alt="member 3" />
</div>
</div>
<h4> L'admission</h4>
</div>
</li>

<li class="col-lg-3 col-md-3 col-sm-3 ">
<div class="text-center">
<div class="zoom-in">
<div class="member-thumb">
<img src="images/logo/test1.png" class="img-responsive" alt="member 3" />
</div>
</div>
<h4> Les supports</h4>
</div>
</li>

</ul>

</div>
</div>

</div>
</div>
<!-- /#FIN SOMMAIRE PRODUITS -->

.ensemble {
    padding-bottom: 30px;
	min-height: 100px;
	width:100%;
    background: url(../images/produit.png) no-repeat center;
	background-size: cover;
}

.ensemble .container {
    padding-top:20px;
    position:relative;
}
.ensemble .title {
      color: #fff;
	 font-weight:500;
	 font-size: 35px;
}

.ensemble h4 {
      color: #fff;
	  font-weight:500;
	  font-size: 20px;
}

.circle-border {
    display: inline-block;
    border-radius: 500px;
    border: 1px solid #fff;
}

.test{
  width:150px;
  height:150px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border: 1px solid #fff;
}

Si j'ai bien compris, le code que je te propose devrait t'aller

http://codepen.io/anon/pen/RrZEXe

Rien ne change... je pense que cette fois-ci ca vient de moi, j'ai passé la journée à chercher une solution et je commence à saturer donc je bacle les choses. Je vais essayer avec ta méthode demain, je serais moins tendu

Dans tous les cas, merci beaucoup pour le temps que vous avez pris pour m'aider =) 

<!DOCTYPE html>
     <style type="text/css">

     body { background:whitesmoke; width: 800px; border: 2px solid red; }
    .roundedImage {
     overflow: hidden;
     border-radius:150px;
     width:300px; height:300px;
     margin: 20px;
          }
     img  { height: 300px; }

     </style>
     <div class="roundedImage">
          <img src="http://www.detourafrica.co.za/images/photos/Yawning-hippo.jpg">
     </div>

P.S : Attention avec une image rectangulaire, le sujet ne sera pas centré !...

-
Edité par Anonyme 14 janvier 2016 à 18:16:06

Bonjour, 

J'ai appliqué les bordures arrondies sur une image carrée pour la rendre ronde (sur divi : style>bordure>rectangle arrondi).

Néanmoins, celle-ci s'affiche en rectangle ovale, et non en rond. Ses dimensions : 1129 pixels par 1129.

Je sais que c'est possible sans forcément passer par du CSS, mais je n'arrive pas à trouver d'où vient le problème.

Auriez-vous une solution ? 

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.