hiroosak/index.html

## index.html
<!doctype html>
<html>
<head>
<title>-</title>
<style>

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: absolute;
}
img {
  position: relative;
}
p {
  position: relative;
  color: #428;
  top: 400;
  z-index: 1000;
}

</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
  var sw = $(window).width();
  var sh = $(window).height();

  var imgElm = $('img.cover');

  var iw = imgElm.width();
  var ih = imgElm.height();

  if (sw > sh) {
    imgElm.css('width', sw);
    ih = imgElm.height();
    var margin = (ih - sh) / 2;
    imgElm.css('top', (-1) * margin);
  } else {
    imgElm.css('height', $(window).height());
  }
});
</script>
</head>
<body>
<img src="prof.jpg" class='cover' alt="">
<p>あいうえお</p>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>-</title>
	<style>

	body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: absolute;
	}
	img {
	position: relative;
	}
	p {
	position: relative;
	color: #428;
	top: 400;
	z-index: 1000;
	}

	</style>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
	$(function() {
	var sw = $(window).width();
	var sh = $(window).height();

	var imgElm = $('img.cover');

	var iw = imgElm.width();
	var ih = imgElm.height();

	if (sw > sh) {
	imgElm.css('width', sw);
	ih = imgElm.height();
	var margin = (ih - sh) / 2;
	imgElm.css('top', (-1) * margin);
	} else {
	imgElm.css('height', $(window).height());
	}
	});
	</script>
	</head>
	<body>
	<img src="prof.jpg" class='cover' alt="">
	<p>あいうえお</p>
	</body>
	</html>