All geek questions in one place

How to crop the image so that it matches 50% of the screen?

I need the image to correspond to 50% of the screen height of the device and not to 50% of the current screen size (the user could minimize the screen). Also, when the user resizes the screen, I do not want the image to automatically fit the screen when it is initially displayed.

The image is very large and I'm looking at crop , not resizing . Here is what I have done so far:

home.html:

<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>      
<img class="image" src="myimage.jpg" alt="">
</body>
</html>

home.css:

html, body {
margin:0;
border:0;
padding:0;
}

img.image {
width:100%;
}

I do not want to use anything except HTML, CSS and JavaScript. It would be great if someone helped me figure out how to do this in CSS. Thank!

+4
3

css clip.

JavaScript .

+3

, : . DEMO/example:

html, body {
  height:100%;
  margin:0;
}
.crop50h {
  height:50%;
  overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
  text-align:center;
}
.crop50h img {
 /* width:100%;  ? */
  margin:0 -100%;
  min-width:100%;
}

Wit html:

<div class="crop50h">
    <img src="http://lorempixel.com/1200/1200/"/>
</div>
+2

, , 50% , .

window.screen.availHeight Javascript :

var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];

image.width=(half)+"px";
0

Source: https://habr.com/ru/post/1540865/

More articles:


All Articles