CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのobject-positionプロパティ

object-positionプロパティは、画像またはビデオを独自のボックス内に配置する方法を指定するために使用されます。

例

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   width: 200px;
   height: 200px;
   object-fit: none;
   object-position: 10px 20%;
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250">
<h2>Memcached Tutorial</h2>
<img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250">
</body>
</html>

出力

CSSのobject-positionプロパティ


  1. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  2. CSSでのカラープロパティの設定

    CSSを使用して、要素のテキスト、境界線、背景の色を定義できます。 colorプロパティは、要素のテキストの色を指定するために使用されます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    color: seashell;    background-color