<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>私塾家</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container {
				padding: 15px;
			}
			.max-image {
				display: none;
			}
			.max-image.active {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9;
				background: #333;
				display: flex;
				display: -webkit-flex;
				-webkit-justify-content: center;
				align-items: center;
				-webkit-justify-content: center;
				align-items: center;
			}
			.max-image img {
				width: auto;
				object-fit: cover;
			}
		</style>
	</head>
	<body>
		<div class="container" th:utext="${problem.name}"></div>
<script type="text/javascript" th:src="@{/static/sys/js/meun/jquery/jquery-1.9.1.min.js}"></script>
		<script type="text/javascript">
			$(function(){
				var resize = function (html) {
					$('.container').append(html);
//					$(document).find('img').width('100%');
					$(document).on('click', 'img', function (e) {
						$('.max-image').find('img').attr('src', $(this).attr('src'));
						$('.max-image').addClass('active');
					});
					$('.max-image').click(function(){
						if ($(this).hasClass('active')) {
							$(this).removeClass('active');
						}
					});
				};
			});
		</script>
	</body>
</html>
