Buscado en la web durante semanas, pero no puede encontrar la respuesta que satisface todas mis necesidades (parcial), la ayuda es muy bienvenida.

Lo que quiero y que han logrado

  • Llanura compatible con HTML5 y CSS
  • Mostrar una imagen dentro de un artículo
  • Imagen debe tener un título
  • Título deben debajo de la imagen
  • Título debe ser limitado a horizantal tamaño de la imagen
  • Título puede tener más de una línea y el texto debe ajustarse a la siguiente línea (aún dentro de tamaño de imagen)
  • De la imagen y el título debe flotar como un grupo a la izquierda o a la derecha (piense en el uso de <figure class="left">)
  • Texto del artículo debe envolver alrededor de la imagen y el título
  • El tamaño de la imagen varía (la primera imagen es, por ejemplo, 200px, 2ª imagen a otra parte en el texto es de 320 px etc.)

Y ahora me gustaría añadir aquellos requisitos:

  • No me gusta para agregar el ancho original de la imagen, como <figure class="left" style="width:200px"> pero sólo si no hay otra manera.
  • Diseño sensible: cuando el ancho de la imagen va a ocupar más del 50% del ancho de pantalla, debe ser limitada a 50% del ancho de pantalla.
  • Cuando el ancho de pantalla es de 320 px o por debajo, la imagen no debe flotar, sino que debe un elemento de nivel de bloque, por lo que no ceñir texto del artículo en torno a la imagen.

Donde lo dejé:

CSS:

figure {
  display: inline
}

figcaption {
  display: block
}

figure.left {
  float: left
}

figure.right {
  float: right
}

HTML:

<p>This is a part of the text of the article and at this point a image is inserted at the left side
  <figure class="left" style="width:250px">
    <img src="image.png" alt="img txt">
    <figcaption>image caption and a lot of text</figcaption>
  </figure>
  and the article text goes on and on so that it will wrap around the image</p>

(Me fui de la acolchado/márgenes y tal para que se vea mejor).

InformationsquelleAutor luvTweb | 2013-07-16

3 Comentarios

  1. 2

    Tratar el siguiente css y mirar al cambiar el tamaño del navegador, el texto que se ajuste en la imagen:

    .left {
      float: left;
      border: 5px solid #BDBDBD;
      background: #E0E0E0;
      padding: 5px;
      margin: 0px;
    }
    
    figcaption {
      text-align: center;
    }
  2. 1

    Tal vez esto se siente demasiado html3, pero he encontrado esta respuesta:

    http://www.sitepoint.com/forums/showthread.php?1049396-How-to-force-this-figcaption-element-to-respect-its-parent-s-width-boundaries

    figure {
      display: table;
    }
    figcaption {
      display: table-caption;
      caption-side: bottom;
    }

    No creo que esto está prohibido por HTML5 o CSS3 y ciertamente parece que funciona para mí.

    Dejando de lado el diseño de respuesta requisitos, me siento como que es una pregunta aparte de que no tengo un buen CSS única respuesta.

  3. 0

    Esto puede ayudar a alguien a resolver. Yo también estoy buscando una manera de mostrar el título de la derecha de la imagen con la misma altura de la imagen.

    CSS:

    figure, .figure {
      
         display: inline-table;
    }
    
    figcaption {
        display: table-caption;
         caption-side: bottom;
          background-color: red;
      
    }
         
    img {
         width: 100%;
    }
         
    .image {
         width: auto;
    }
         
         figure div {
              display: inline-table;
              background-color: aqua;
         }
         
    .caption {
        display: table-caption;
         caption-side: top;
          background-color: red;
         margin: 0;
    }

    HTML:

    <figure>
        <h2 class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </h2>
        
            <img src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
            <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
    </figure>
    
    <figure>
        <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption>
        
            <img src="http://mintnet.net/images/thumbs/small-mossy.jpg">
           
    </figure>
    
    <figure>
        <div class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </div>
        
           <div><img  class="image" src="http://mintnet.net/images/thumbs/small-mossy.jpg">
                </div> 
           
    </figure>

Dejar respuesta

Please enter your comment!
Please enter your name here