You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1399 lines
41 KiB
1399 lines
41 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Standard Meta -->
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
|
|
|
<link rel="image_src" type="image/jpeg" href="/images/logo.png" />
|
|
|
|
<!-- Site Properities -->
|
|
<meta name="generator" content="DocPad v6.78.1" />
|
|
<title>Image | Semantic UI</title>
|
|
|
|
<meta name="description" content="An image is a graphic representation of something" />
|
|
<meta name="keywords" content="html5, ui, library, framework, javascript" />
|
|
|
|
<script src="/javascript/library/jquery.min.js"></script>
|
|
<script src="/javascript/library/clipboard.min.js"></script>
|
|
<script src="/javascript/library/cookie.min.js"></script>
|
|
<script src="/javascript/library/easing.min.js"></script>
|
|
<script src="/javascript/library/highlight.min.js"></script>
|
|
<script src="/javascript/library/history.min.js"></script>
|
|
<script src="/javascript/library/tablesort.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="/dist/semantic.min.js"></script>
|
|
|
|
|
|
|
|
<script src="/javascript/docs.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-44039803-2', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
window.liveSettings = {
|
|
api_key : '9ede3015b9f84c1aabc81ab839c55d74',
|
|
parse_attr : [
|
|
'data-title',
|
|
'data-content'
|
|
],
|
|
detectlang : false,
|
|
autocollect : true,
|
|
ignore_tags : ['i', 'code', 'pre'],
|
|
parse_attr : ['data-title', 'data-content', 'data-text'],
|
|
ignore_class : ['code', 'anchor']
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
|
|
|
|
</head>
|
|
<body id="example" class="image" ontouchstart="">
|
|
|
|
<div class="ui vertical inverted sidebar menu" id="toc">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
<a class="ui logo icon image" href="/">
|
|
<img src="/images/logo.png">
|
|
</a>
|
|
<a href="/"><b>UI Docs</b></a>
|
|
</div>
|
|
<a class="item" href="/introduction/getting-started.html">
|
|
<b>Getting Started</b>
|
|
</a>
|
|
<a class="item" href="/introduction/new.html">
|
|
<b>New in 2.1</b>
|
|
</a>
|
|
<div class="item">
|
|
<div class="header">Introduction</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/introduction/integrations.html">
|
|
Integrations
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/advanced-usage.html">
|
|
Recipes
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/glossary.html">
|
|
Glossary
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Usage</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/usage/theming.html">
|
|
Theming
|
|
</a>
|
|
|
|
<a class="item" href="/usage/layout.html">
|
|
Layouts
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Globals</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/globals/reset.html">
|
|
Reset
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/globals/site.html">
|
|
Site
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="active header">Elements</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/elements/button.html">
|
|
Button
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/container.html">
|
|
Container
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/divider.html">
|
|
Divider
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/flag.html">
|
|
Flag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/header.html">
|
|
Header
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/icon.html">
|
|
Icon
|
|
|
|
</a>
|
|
|
|
<a class="active item" href="/elements/image.html">
|
|
Image
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/input.html">
|
|
Input
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/label.html">
|
|
Label
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/list.html">
|
|
List
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/loader.html">
|
|
Loader
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/rail.html">
|
|
Rail
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/reveal.html">
|
|
Reveal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/segment.html">
|
|
Segment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/step.html">
|
|
Step
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Collections</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/collections/breadcrumb.html">
|
|
Breadcrumb
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/form.html">
|
|
Form
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/grid.html">
|
|
Grid
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/menu.html">
|
|
Menu
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/message.html">
|
|
Message
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/table.html">
|
|
Table
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Views</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/views/advertisement.html">
|
|
Advertisement
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/card.html">
|
|
Card
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/comment.html">
|
|
Comment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/feed.html">
|
|
Feed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/item.html">
|
|
Item
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/statistic.html">
|
|
Statistic
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Modules</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/modules/accordion.html">
|
|
Accordion
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/checkbox.html">
|
|
Checkbox
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dimmer.html">
|
|
Dimmer
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dropdown.html">
|
|
Dropdown
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/embed.html">
|
|
Embed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/modal.html">
|
|
Modal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/nag.html">
|
|
Nag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/popup.html">
|
|
Popup
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/progress.html">
|
|
Progress
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/rating.html">
|
|
Rating
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/search.html">
|
|
Search
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/shape.html">
|
|
Shape
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sidebar.html">
|
|
Sidebar
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sticky.html">
|
|
Sticky
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/tab.html">
|
|
Tab
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/transition.html">
|
|
Transition
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Behaviors</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/behaviors/api.html">
|
|
API
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/form.html">
|
|
Form Validation
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/visibility.html">
|
|
Visibility
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui black big launch right attached fixed button">
|
|
<i class="content icon"></i>
|
|
<span class="text">Menu</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ui fixed inverted main menu">
|
|
<div class="ui container">
|
|
<a class="launch icon item">
|
|
<i class="content icon"></i>
|
|
</a>
|
|
|
|
<div class="item">
|
|
Image
|
|
</div>
|
|
|
|
<div class="right menu">
|
|
|
|
<div class="vertically fitted borderless item">
|
|
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="item">
|
|
<div class="ui hidden right aligned search input" id="search">
|
|
<div class="ui transparent icon input">
|
|
<input class="prompt" type="text" placeholder="Search...">
|
|
<i class="inverted search link icon" data-content="Search UI"></i>
|
|
</div>
|
|
<div class="results"></div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pusher">
|
|
<div class="full height">
|
|
<div class="toc">
|
|
<div class="ui vertical inverted sticky menu">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item">
|
|
<a class="ui logo icon image" href="/">
|
|
<img src="/images/logo.png">
|
|
</a>
|
|
<a href="/"><b>UI Docs</b></a>
|
|
</div>
|
|
<a class="item" href="/introduction/getting-started.html">
|
|
<b>Getting Started</b>
|
|
</a>
|
|
<a class="item" href="/introduction/new.html">
|
|
<b>New in 2.1</b>
|
|
</a>
|
|
<div class="item">
|
|
<div class="header">Introduction</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/introduction/integrations.html">
|
|
Integrations
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/advanced-usage.html">
|
|
Recipes
|
|
</a>
|
|
|
|
<a class="item" href="/introduction/glossary.html">
|
|
Glossary
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Usage</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/usage/theming.html">
|
|
Theming
|
|
</a>
|
|
|
|
<a class="item" href="/usage/layout.html">
|
|
Layouts
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Globals</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/globals/reset.html">
|
|
Reset
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/globals/site.html">
|
|
Site
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="active header">Elements</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/elements/button.html">
|
|
Button
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/container.html">
|
|
Container
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/divider.html">
|
|
Divider
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/flag.html">
|
|
Flag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/header.html">
|
|
Header
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/icon.html">
|
|
Icon
|
|
|
|
</a>
|
|
|
|
<a class="active item" href="/elements/image.html">
|
|
Image
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/input.html">
|
|
Input
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/label.html">
|
|
Label
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/list.html">
|
|
List
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/loader.html">
|
|
Loader
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/rail.html">
|
|
Rail
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/reveal.html">
|
|
Reveal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/segment.html">
|
|
Segment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/elements/step.html">
|
|
Step
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Collections</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/collections/breadcrumb.html">
|
|
Breadcrumb
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/form.html">
|
|
Form
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/grid.html">
|
|
Grid
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/menu.html">
|
|
Menu
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/message.html">
|
|
Message
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/collections/table.html">
|
|
Table
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Views</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/views/advertisement.html">
|
|
Advertisement
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/card.html">
|
|
Card
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/comment.html">
|
|
Comment
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/feed.html">
|
|
Feed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/item.html">
|
|
Item
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/views/statistic.html">
|
|
Statistic
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Modules</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/modules/accordion.html">
|
|
Accordion
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/checkbox.html">
|
|
Checkbox
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dimmer.html">
|
|
Dimmer
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/dropdown.html">
|
|
Dropdown
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/embed.html">
|
|
Embed
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/modal.html">
|
|
Modal
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/nag.html">
|
|
Nag
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/popup.html">
|
|
Popup
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/progress.html">
|
|
Progress
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/rating.html">
|
|
Rating
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/search.html">
|
|
Search
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/shape.html">
|
|
Shape
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sidebar.html">
|
|
Sidebar
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/sticky.html">
|
|
Sticky
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/tab.html">
|
|
Tab
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/modules/transition.html">
|
|
Transition
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class=" header">Behaviors</div>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/behaviors/api.html">
|
|
API
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/form.html">
|
|
Form Validation
|
|
|
|
</a>
|
|
|
|
<a class="item" href="/behaviors/visibility.html">
|
|
Visibility
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="article">
|
|
|
|
|
|
<div class="ui masthead vertical segment">
|
|
<div class="ui container">
|
|
<div class="introduction">
|
|
|
|
<h1 class="ui header">
|
|
Image
|
|
|
|
<div class="sub header">
|
|
|
|
<a class="twitter-share-button twitter"
|
|
href="http://twitter.com/share"
|
|
data-text="Semantic UI is a next generation UI framework"
|
|
data-url="http://semantic-ui.com"
|
|
data-via="semanticui">
|
|
</a>
|
|
<script type="text/javascript">
|
|
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
|
|
</script>
|
|
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
|
|
An image is a graphic representation of something
|
|
</div>
|
|
</h1>
|
|
|
|
<div class="ui hidden divider"></div>
|
|
|
|
<div class="ui right floated main menu">
|
|
<a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/elements/image.html.eco">
|
|
<i class="edit icon"></i>
|
|
</a>
|
|
|
|
<a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Image] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Image should do this%0A%0A**Result**%0AThe Image does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
|
|
<i class="bug icon"></i>
|
|
</a>
|
|
|
|
<a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
|
|
<i class="alternate github icon"></i>
|
|
</a>
|
|
</div>
|
|
<div class="ui right floated main menu">
|
|
<a class="music popup icon item" data-content="Play Music">
|
|
<i class="music icon"></i>
|
|
</a>
|
|
<div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
|
|
<i class="world icon"></i>
|
|
<div class="menu">
|
|
<div class="header">Select Language</div>
|
|
<div class="ui icon search input">
|
|
<i class="search icon"></i>
|
|
<input type="text" placeholder="Search languages...">
|
|
</div>
|
|
<div class="scrolling menu">
|
|
<div class="item" data-percent="100" data-value="en" data-text="English" data-english="English">
|
|
<span class="description">English</span>
|
|
English
|
|
</div>
|
|
<div class="item" data-percent="94" data-value="da" data-text="dansk" data-english="Danish">
|
|
<span class="description">dansk</span>
|
|
Danish
|
|
</div>
|
|
<div class="item" data-percent="94" data-value="es" data-text="Español" data-english="Spanish">
|
|
<span class="description">Español</span>
|
|
Spanish
|
|
</div>
|
|
<div class="item" data-percent="34" data-value="zh" data-text="简体中文" data-english="Chinese">
|
|
<span class="description">简体中文</span>
|
|
Chinese
|
|
</div>
|
|
<div class="item" data-percent="54" data-value="zh_TW" data-text="中文 (臺灣)" data-english="Chinese (Taiwan)">
|
|
<span class="description">中文 (臺灣)</span>
|
|
Chinese (Taiwan)
|
|
</div>
|
|
<div class="item" data-percent="79" data-value="fa" data-text="پارسی" data-english="Persian">
|
|
<span class="description">پارسی</span>
|
|
Persian
|
|
</div>
|
|
<div class="item" data-percent="41" data-value="fr" data-text="Français" data-english="French">
|
|
<span class="description">Français</span>
|
|
French
|
|
</div>
|
|
<div class="item" data-percent="37" data-value="el" data-text="ελληνικά" data-english="Greek">
|
|
<span class="description">ελληνικά</span>
|
|
Greek
|
|
</div>
|
|
<div class="item" data-percent="37" data-value="ru" data-text="Русский" data-english="Russian">
|
|
<span class="description">Русский</span>
|
|
Russian
|
|
</div>
|
|
<div class="item" data-percent="36" data-value="de" data-text="Deutsch" data-english="German">
|
|
<span class="description">Deutsch</span>
|
|
German
|
|
</div>
|
|
<div class="item" data-percent="23" data-value="it" data-text="Italiano" data-english="Italian">
|
|
<span class="description">Italiano</span>
|
|
Italian
|
|
</div>
|
|
<div class="item" data-percent="21" data-value="nl" data-text="Nederlands" data-english="Dutch">
|
|
<span class="description">Nederlands</span>
|
|
Dutch
|
|
</div>
|
|
<div class="item" data-percent="19" data-value="pt_BR" data-text="Português(BR)" data-english="Portuguese">
|
|
<span class="description">Português(BR)</span>
|
|
Portuguese
|
|
</div>
|
|
<div class="item" data-percent="17" data-value="id" data-text="Indonesian" data-english="Indonesian">
|
|
<span class="description">Indonesian</span>
|
|
Indonesian
|
|
</div>
|
|
<div class="item" data-percent="12" data-value="lt" data-text="Lietuvių" data-english="Lithuanian">
|
|
<span class="description">Lietuvių</span>
|
|
Lithuanian
|
|
</div>
|
|
<div class="item" data-percent="11" data-value="tr" data-text="Türkçe" data-english="Turkish">
|
|
<span class="description">Türkçe</span>
|
|
Turkish
|
|
</div>
|
|
<div class="item" data-percent="10" data-value="kr" data-text="한국어" data-english="Korean">
|
|
<span class="description">한국어</span>
|
|
Korean
|
|
</div>
|
|
<div class="item" data-percent="7" data-value="ar" data-text="العربية" data-english="Arabic">
|
|
<span class="description">العربية</span>
|
|
Arabic
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="hu" data-text="Magyar" data-english="Hungarian">
|
|
<span class="description">Magyar</span>
|
|
Hungarian
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="vi" data-text="tiếng Việt" data-english="Vietnamese">
|
|
<span class="description">tiếng Việt</span>
|
|
Vietnamese
|
|
</div>
|
|
<div class="item" data-percent="5" data-value="sv" data-text="svenska" data-english="Swedish">
|
|
<span class="description">svenska</span>
|
|
Swedish
|
|
</div>
|
|
<div class="item" data-precent="4" data-value="pl" data-text="polski" data-english="Polish">
|
|
<span class="description">polski</span>
|
|
Polish
|
|
</div>
|
|
<div class="item" data-percent="6" data-value="ja" data-text="日本語" data-english="Japanese">
|
|
<span class="description">日本語</span>
|
|
Japanese
|
|
</div>
|
|
<div class="item" data-percent="0" data-value="ro" data-text="românește" data-english="Romanian">
|
|
<span class="description">românește</span>
|
|
Romanian
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ui download primary button">
|
|
Download
|
|
</div>
|
|
<div class="ui flowing download basic popup">
|
|
<div class="ui divided equal width relaxed center aligned choice grid">
|
|
<div class="framework column">
|
|
<h4 class="ui center aligned header">UI Framework</h4>
|
|
<div class="ui list">
|
|
<div class="item"><i class="green check icon"></i> Themable</div>
|
|
<div class="item"><i class="green check icon"></i> Build Tools</div>
|
|
</div>
|
|
<div class="ui primary fluid button">Choose</div>
|
|
</div>
|
|
<div class="standalone column">
|
|
<h4 class="ui center aligned header">Standalone</h4>
|
|
<div class="ui list">
|
|
<div class="item">Default Theme</div>
|
|
<div class="item">Precompiled</div>
|
|
</div>
|
|
<div class="ui fluid button basic">Choose</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divided equal height relaxed center aligned framework grid">
|
|
<div class="column">
|
|
<div class="ui header">Semantic UI</div>
|
|
<a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
|
|
Download ZIP
|
|
</a>
|
|
<a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
|
|
<h4 class="ui header">Package Managers</h4>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>NPM</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Git</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divided equal height relaxed center aligned standalone grid">
|
|
<div class="column">
|
|
<div class="ui header">Standalone Image</div>
|
|
<a class="ui primary button" href="https://github.com/Semantic-Org/UI-Image/archive/master.zip">
|
|
Download ZIP
|
|
</a>
|
|
<a class="ui button" href="https://github.com/Semantic-Org/UI-Image/">
|
|
View GitHub
|
|
</a>
|
|
<h4 class="ui header">Package Managers</h4>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>Bower</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-image">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>NPM</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-image">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Git</label>
|
|
<div class="ui fluid input">
|
|
<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Image.git">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="advertisement">
|
|
|
|
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="main ui container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example" data-class="image" data-tag="img,svg">
|
|
<h4 class="ui header">Image</h4>
|
|
<p>An image</p>
|
|
<div class="ui ignored message">
|
|
Unless a size is specified, images will use the original dimensions of the image up to the size of its container.</code>.
|
|
</div>
|
|
<div class="ui ignored info message">
|
|
You can specify an <code>img</code> or <code>svg</code> as a <code>ui image</code> or use a child element.</code>
|
|
</div>
|
|
<img class="ui small image" src="/images/wireframe/image.png">
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui small image">
|
|
<img src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui small image">
|
|
<svg width="150" height="150">
|
|
<image xlink:href="/images/wireframe/image.png" x="0" y="0" width="100%" height="100%"></image>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Image Link</h4>
|
|
<p>An image can be formatted to link to other content</p>
|
|
<a href="http://google.com" class="ui medium image">
|
|
<img src="/images/wireframe/image-text.png">
|
|
</a>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">
|
|
States
|
|
</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Hidden</h4>
|
|
<p>An image can be hidden</p>
|
|
<img class="hidden ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>An image can show that it is disabled and cannot be selected</p>
|
|
<img class="disabled medium ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Avatar</h4>
|
|
<p>An image may be formatted to appear inline with text as an avatar</p>
|
|
<img class="ui avatar image" src="/images/wireframe/square-image.png">
|
|
<span>Username</span>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Bordered</h4>
|
|
<p>An image may include a border to emphasize the edges of white or transparent content</p>
|
|
<img class="ui medium bordered image" src="/images/wireframe/white-image.png">
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fluid</h4>
|
|
<p>An image can take up the width of its container</p>
|
|
<img class="ui fluid image" src="/images/wireframe/image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Rounded</h4>
|
|
<p>An image may appear rounded</p>
|
|
<img class="ui medium rounded image" src="/images/wireframe/square-image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Circular</h4>
|
|
<p>An image may appear circular</p>
|
|
<img class="ui medium circular image" src="/images/wireframe/square-image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertically Aligned</h4>
|
|
<p>An image can specify its vertical alignment</p>
|
|
<img class="ui top aligned tiny image" src="/images/wireframe/square-image.png">
|
|
<span>Top Aligned</span>
|
|
<div class="ui divider"></div>
|
|
<img class="ui middle aligned tiny image" src="/images/wireframe/square-image.png">
|
|
<span>Middle Aligned</span>
|
|
<div class="ui divider"></div>
|
|
<img class="ui bottom aligned tiny image" src="/images/wireframe/square-image.png">
|
|
<span>Bottom Aligned</span>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Centered</h4>
|
|
<p>An image can appear centered in a content block</p>
|
|
<div class="ui segment">
|
|
<img class="ui centered medium image" src="/images/wireframe/image.png">
|
|
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
|
|
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
|
|
<img class="ui small centered image" src="/images/wireframe/text-image.png">
|
|
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Spaced</h4>
|
|
<p>An image can specify that it needs an additional spacing to separate it from nearby content</p>
|
|
|
|
<div class="ui segment">
|
|
<p>Te eum doming eirmod, nominati pertinacia <img class="ui mini spaced image" src="/images/wireframe/image.png"> argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="another example">
|
|
<p><img class="ui mini right spaced image" src="/images/wireframe/image.png">Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
|
|
|
|
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.<img class="ui mini left spaced image" src="/images/wireframe/image.png"></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Floated</h4>
|
|
<p>An image can sit to the left or right of other content</p>
|
|
<div class="ui segment">
|
|
<img class="ui small left floated image" src="/images/wireframe/text-image.png">
|
|
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
|
|
<img class="ui small right floated image" src="/images/wireframe/text-image.png">
|
|
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
|
|
|
|
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearing example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>An image may appear at different sizes</p>
|
|
<div class="ui ignored info message">
|
|
Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in <code>image.variables</code>.
|
|
</div>
|
|
<table class="ui definition table">
|
|
<thead>
|
|
<tr>
|
|
<th>Class Name</th>
|
|
<th>Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Mini</td>
|
|
<td>35px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tiny</td>
|
|
<td>80px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Small</td>
|
|
<td>150px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Medium</td>
|
|
<td>300px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Large</td>
|
|
<td>450px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Big</td>
|
|
<td>600px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Huge</td>
|
|
<td>800px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Massive</td>
|
|
<td>960px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<img class="ui mini image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui tiny image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui small image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui medium image" src="/images/wireframe/image.png">
|
|
|
|
<div class="existing code">
|
|
<img class="ui mini image" src="/images/wireframe/image.png">
|
|
<img class="ui tiny image" src="/images/wireframe/image.png">
|
|
<img class="ui small image" src="/images/wireframe/image.png">
|
|
<img class="ui medium image" src="/images/wireframe/image.png">
|
|
<img class="ui large image" src="/images/wireframe/image.png">
|
|
<img class="ui big image" src="/images/wireframe/image.png">
|
|
<img class="ui huge image" src="/images/wireframe/image.png">
|
|
<img class="ui massive image" src="/images/wireframe/image.png">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h2 class="ui dividing header">Groups</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>A group of images can be formatted to have the same size.</p>
|
|
<div class="ui tiny images">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui small images">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui black inverted vertical footer segment">
|
|
<div class="ui center aligned container">
|
|
<div class="ui stackable inverted grid">
|
|
<div class="three wide column">
|
|
<h4 class="ui inverted header">Community</h4>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
|
|
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
|
|
<a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
|
|
<a class="item" href="/cla.html" target="_blank">CLA</a>
|
|
</div>
|
|
</div>
|
|
<div class="three wide column">
|
|
<h4 class="ui inverted header">Network</h4>
|
|
<div class="ui inverted link list">
|
|
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
|
|
<a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
|
|
<a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="three wide column">
|
|
<h4 class="ui inverted header">Learn</h4>
|
|
<div class="ui inverted link list">
|
|
<a href="#" class="disabled item">Example Layouts</a>
|
|
<a href="#" class="disabled item">The Project</a>
|
|
<a href="#" class="disabled item">Roadmap</a>
|
|
<a href="#" class="disabled item">About the Author</a>
|
|
</div>
|
|
</div> -->
|
|
<div class="seven wide right floated column">
|
|
<h4 class="ui inverted teal header">Help Preserve This Project</h4>
|
|
<p> Support for the continued development of Semantic UI comes directly from the community.</p>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
|
|
<button type="submit" class="ui large teal button">Donate Today</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="ui inverted section divider"></div>
|
|
<img src="/images/logo.png" class="ui centered mini image">
|
|
<div class="ui horizontal inverted small divided link list">
|
|
<a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic language modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
|
|
<div class="image content">
|
|
<div class="middle aligned image">
|
|
<i class="world icon"></i>
|
|
</div>
|
|
<div class="description">
|
|
<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
|
|
<div class="ui inverted indicating progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<p>We need your help to make Semantic available to people who speak your language.</p>
|
|
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui inverted cancel button">No Thanks</div>
|
|
<a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
|
|
<i class="mail icon"></i>
|
|
Help Translate
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic chinese modal">
|
|
<i class="close icon"></i>
|
|
<div class="header">Would you like to visit the mirror site?</div>
|
|
<div class="image content">
|
|
<div class="middle aligned image">
|
|
<i class="question icon"></i>
|
|
</div>
|
|
<div class="description">
|
|
<p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="ui inverted red cancel button">No Thanks</div>
|
|
<a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
|
|
<i class="mail icon"></i>
|
|
Yes, take me to the mirror
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui demo page dimmer">
|
|
<div class="content">
|
|
<div class="center">
|
|
<h2 class="ui inverted icon header">
|
|
<i class="mail icon"></i>
|
|
Dimmer Message
|
|
<div class="sub header">Dimmer sub-header</div>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.less = {
|
|
async : true,
|
|
environment : 'production',
|
|
fileAsync : false,
|
|
onReady : false,
|
|
useFileCache : true
|
|
};
|
|
</script>
|
|
|
|
<script src="/javascript/library/less.min.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|