1

Veran, tengo el siguiente codigo html (he quitado parte del codigo para que no os perdais):

{% load staticfiles %}
<html>
<body>
<h1>Lista de animales</h1>
<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% endfor %}
</table>
</body>
</html>

Que se ve asi: introducir la descripción de la imagen aquí

Y quisiera que, mejor que eso, que al llegar al "borde" de la pantalla siguiese abajo. Algo como en este boceto:

introducir la descripción de la imagen aquí

Actualizo: He solucionado provisionalmente el problema. Codigo html:

<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<br>
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% if forloop.counter|divisibleby:8 %}
<tr/>
{% endif %}
{% endfor %}
</table>

Pero hay un problema: La pantalla de mi PC es grande, por lo que ahi puedo hacer que se muestre bien las imagenes, pero en una pantalla mas pequeña puede haber fotos que pasen al otro lado de la pantalla. La solucion es que el divisibleby en vez de recibir un valor fijo, sea por ejempo, el ancho del fondo entre 250. ¿Que variable en html obtiene el tamaño de la pantalla?

1 respuesta 1

1

Creo que hay tres opciones. Si quieres, digamos 3 imagenes por línea, puedes hacer una prueba mínima en tu plantilla usando foorloop:

{% for alfa in animales %}
   {% if forloop.counter0|divisibleby:4 %}
     <tr><td>
       <div class="clear"></div>
     </td></tr>
   {% endif %}
{% endfor %}

(no he probado el código, pero esa es la idea)

Otra posibilidad es dejar que se acomode solo... Observa como se ve, si usamos max-width:300px

.imagenes {
  max-width: 300px;
}
<table>
  <tr>
    <td>
      <div class="imagenes">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
      </div>
    </td>
  </tr>
</table>
        
      

y como se ve si usamos max-width: 900px...

.imagenes {
  max-width: 900px;
}
<table>
  <tr>
    <td>
      <div class="imagenes">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
        <img src="http://lorempixel.com/100/100/" class="imagen">
      </div>
    </td>
  </tr>
</table>
        
     

La tercera opción es usar una framwork como Bootstrap o Foundation para hacer tu sitio adaptable.

2
  • Intente la primera, pero dependiendo del tamaño de la pantalla podia ir bien o fallar. La opción del Bootstrap me interesa. ¿Algun ejemplo? Commented el 10 may. 2017 a las 17:15
  • @MiguelAlparez dejé el enlace en mi respuesta.
    – toledano
    Commented el 10 may. 2017 a las 19:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.