HTML display bottom left quarter of the image

Question

I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:

<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />

but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?

Possible duplicate of https://stackoverflow.com/questions/37461021/display-a-part-of-image-css-html or https://stackoverflow.com/questions/18146100/select-part-of-a-jpeg-image-to-display-in-html — Chris Walsh, Feb 21 '18 at 15:11
Possible duplicate of [select part of a jpeg image to display in html](https://stackoverflow.com/questions/18146100/select-part-of-a-jpeg-image-to-display-in-html) — Jess Bowers, Feb 21 '18 at 16:28

score 0 · Answer 1 · answered Feb 21 '18 at 15:12

You can just use a div element that has a background image and then just apply a few css changes to that div like so:

#theImg {
  height: 200px;
  width: 200px;
  display: block;
  background-image: url('https://myimage.jpg');
  background-position: bottom left;
}

JsFiddle: https://jsfiddle.net/kekwdy2L/3/

score 0 · Answer 2 · answered Feb 21 '18 at 15:14

Use background-image with background-position:

#my-image {
  background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
  background-position: -220px -80px;
  display: inline-block;
  width: 200px;
  height: 200px;
}

<div id="my-image"></div>

score 0 · Accepted Answer · answered Feb 21 '18 at 15:14

If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.container img {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="container">
  <img src="http://placehold.it/600x400/fa0" />
</div>

score 0 · Answer 4 · answered Feb 21 '18 at 15:20

0

<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>

answered Feb 21 '18 at 15:20

score -1 · Answer 5 · edited Feb 21 '18 at 17:52

-1

If you know the size of the image in pixels, you can use a css clip.

Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.

Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.

edited Feb 21 '18 at 17:52

JeB

11,653
10
58
87

answered Feb 21 '18 at 15:12

Jon

401
3
11

HTML display bottom left quarter of the image

5 Answers5