Ok, abajo pongo parte del código, básicamente es un submenú de la web (responsive design), a todo lo ancho de la página, los elementos li tienen un % del ancho del sitio y la imagen ocupa el 100% del ancho del li. Entonces, a medida que se aumenta la resolución va aumentando el ancho del li y por consiguiente el de la imagen. Por tanto, al comienzo la imagen no tiene el tamaño máximo de esta si no en el momento en que el diseño ya no se puede ensanchar más... no se si me explico...
Código HTML:
<ul class="lista-rutas">
<li class="ruta">
<a href="rutas/ruta1.html">
<div class="img-ruta"><img src="img/img-ruta1-min.jpg" alt="img ruta 1"/></div>
<div class="txt-ruta">ruta 1</div>
</a>
</li>
<li class="ruta">
<a href="rutas/ruta2.html">
<div class="img-ruta"><img src="img/img-ruta2-min.jpg" alt="img ruta 2"/></div>
<div class="txt-ruta">Ruta 2</div>
</a>
</li>
<li class="ruta">
<a href="rutas/ruta3.html">
<div class="img-ruta"><img src="img/img-ruta3-min.jpg" alt="img ruta 3"/></div>
<div class="txt-ruta">Ruta 3</div>
</a>
</li>
<li class="ruta">
<a href="rutas/ruta4.html">
<div class="img-ruta"><img src="img/img-ruta4-min.jpg" alt="imagen ruta 4"/></div>
<div class="txt-ruta">Ruta 4</div>
</a>
</li>
<li class="ruta">
<a href="rutas/ruta-5.html">
<div class="img-ruta"><img src="img/img-ruta5-min.jpg" alt="imagen 5"/></div>
<div class="txt-ruta">Ruta 5</div>
</a>
</li>
</ul>