How can I display just a portion of an image in HTML/CSS?
One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.
How to show the only part of the image
Here is a working example: https://snack.expo.io/@zvona/cropped-image
The idea is to have "cropped" View
where Image
is positioned inside it with custom dimensions. I use constants in my example to clarify the case.
<View style={styles.cropped}>
<Image
style={styles.image}
source={{uri: 'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'}} />
</View>
And on styles:
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT,
},
cropped: {
width: 150,
height: 150,
overflow: 'hidden',
position: 'absolute',
left: OFFSET_LEFT,
top: OFFSET_TOP,
},
Note that ImageBackground
is only for example purposes and it's not needed in the actual implementation.
How to show only a portion of an image just by using the img tag?
Final Update--tested IE8+: This solution uses a refinement of Surreal Dreams' idea of using outline for getting the border. This allows a cross browser simplicity compared to the linear-gradient method I was previously going for. It works in IE7, except the outline
(unsupported).
Keeping it as an img
tag with a src
keeps it semantic.
A margin: 1px
is applied to give the outline
"space" in the layout, since by nature outline
takes up no space. The zero height suppresses the main image, and the padding is used create the desired height for the background image (which is set the same as the main image) to show.
HTML
<img class="photo" src="foo.png" style="background-image: url(foo.png)" />
CSS
.photo {
padding: 64px 0 0 0;
border: 3px solid #fff;
outline: 1px solid #000;
margin: 1px;
width: 64px;
height: 0px;
display: block;
}
How to show only part of an image as the background
Instead of applying the background
directly on the label
, create a pseudo element, size it to the dimensions of the image in your sprite and apply your background
to it instead.
input[type="checkbox"]:not(old)+label{ box-sizing:border-box; height:25px;}input[type="checkbox"]:not(old)+label::before{ background: url(http://cdn.sstatic.net/Sites/stackoverflow/../../img/share-sprite-new.svg?v=78be252218f3) no-repeat -220px -54px; content:""; display:inline-block; margin-right:10px; height:25px; vertical-align:bottom; width:25px;}
<input type="checkbox"><label>Some random text</label>
Showing only a part of image in div using css
Use position: relative
on the parent element and position: absolute
on the child images.
#sample {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
#sample img {
position: absolute;
top: -100px;
left: -100px;
}
<div id="sample">
<img src="data:image/jpeg;base64,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"
/>
</div>
Fabricjs: how to display only a part of image?
Have you tried cropX/cropY? Combine them with setting width and height:
const canvas = new fabric.Canvas('c')const url = 'https://i.stack.imgur.com/qVhbV.jpg'const imgEl = document.createElement('img')imgEl.src = urlimgEl.onload = () => { const img = new fabric.Image(imgEl) img.set({ cropX: 70, cropY: 140, width: 200, height: 150, }) canvas.add(img)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script><canvas id="c" width="300" height="200"></canvas>
How to show only the top portion of an image with CSS?
http://jsfiddle.net/3mRh9/1/
Add display: block
to your .limited
style.
.limited {
width: 115px;
height: 115px;
overflow: hidden;
border: 1px solid red;
display: block;
}
<a>
tags are inline by default, and inline elements cannot have width or height.
Alternatively, you could just wrap with a block-level element, like a div
, instead (fiddle):
<div>
<div class="floated">
<div class="limited">
<a href="http://example.com">
<img src="http://change.gov/page/-/officialportrait.jpg"/>
</a>
</div>
</div>
</div>
Css Displaying only center part of image
You can set the image as the bg of an element, and then something like this:
div { background: #eee url(http://www.google.co.cr/logos/classicplus.png) center center; width: 100px; height:100px; border: 1px solid red; text-indent: -9999px; }
<img src="http://www.google.co.cr/logos/classicplus.png"><div>some text that won't be seen</div>
Related Topics
Bootstrap Dropdown Checkbox Select
How to Dynamically Change the Style Tag Using JavaScript
Jquery Word for Word Fade in Effect
Low Power Mode Detection in JavaScript for iOS11
Webkit Transitionend Event Grouping
Getcomputedstyle Gives "Transparent" Instead of Actual Background Color
Image Crossfade with JavaScript and CSS3 Transitions
How to Center the Text in the Headers for an Ag-Grid Control
How to Prevent iOS Safari Alert When Trying to Open Non-Installed Native App
Facebook Oauth "Unsupported" in Chrome on iOS
How to Check That an Element Is Visible with Puppeteer and Pure JavaScript
Calculate Absolute Dimensions of a Div Rotated in Perspective with CSS3
How to Dynamically Change the Value of a CSS Property Inside a Stylesheet
How to Width-Wise Shrink-Wrap Content That Spans More Than One Line
Wkwebview Evaluate JavaScript Return Value
How to Show One <Div> If JavaScript Enabled and a Different <Div> If It's Not