Correction de la taille des images
This commit is contained in:
parent
9efe209689
commit
2153a64f58
|
@ -34,6 +34,7 @@
|
|||
</style>
|
||||
<meta charset="utf8" />
|
||||
</head>
|
||||
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
||||
<body>
|
||||
{% for show in shows %}
|
||||
<table class="descTable">
|
||||
|
@ -59,11 +60,40 @@
|
|||
</tr>
|
||||
{% if show.image %}
|
||||
<tr>
|
||||
<td colspan="2"><p style="text-align:center;"><a href="{{ show.ext_link }}"><img style="display: inline;" src="{{ MEDIA_URL }}{{ show.image }}" alt="{{ show.title }}" height="500px"></a></p></td>
|
||||
<td colspan="2"><p style="text-align:center;"><a href="{{ show.ext_link }}"><img class="imgDesc" style="display: inline;" src="{{ MEDIA_URL }}{{ show.image }}" alt="{{ show.title }}"></a></p></td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endfor %}
|
||||
<script>
|
||||
// Correction de la taille des images
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".imgDesc").on("load", function() {
|
||||
|
||||
// Dimensions
|
||||
origHeight = 500; // Hauteur souhaitée
|
||||
|
||||
w = $(this).width();
|
||||
h = $(this).height();
|
||||
r = w/h; // Ratio de l'image
|
||||
maxWidth = $(this).parent().width();
|
||||
|
||||
if (r * origHeight > maxWidth)
|
||||
{
|
||||
$(this).width(maxWidth);
|
||||
$(this).height(maxWidth/r);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).width(r * origHeight);
|
||||
$(this).height(origHeight);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue