文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 横長・縦長の画像を作成

画像の横幅・高さを変更するCSS作成

CSSの「transform」を利用すると、画像を横に広げたり縮めたり、縦に広げたり縮めたりすることは簡単にできます。
「横に2倍の画像(2倍角)」や「縦長の画像」など色々とお試しください。

当ページでは、簡単な操作でCSSを自動で作成できます。

画像を横長・縦長させて見よう

画像の横幅
画像の高さ
サンプル画像
使用したhtml
<img class="scale" src="../img-sample.png" alt="サンプル画像">
生成したCSS
.scale {
  display     : inline-block;    /* 変形するためのブロック化 */
  transform   : scale(1.0, 1.0);   /* 変形 横,縦 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
ページTOP
広告
広告

色々な拡大・縮小

文字でも同じ指定で拡大・縮小します

文字でも違いはありません。

文字の横縦
<span class="sample1">文字の横縦</span>
<style type="text/css">
.sample1{
  display     : inline-block;
  margin      : 15px;
  font-size   : 24pt;
  line-height : 1.5em;
  transform : scale(3.0,3.0);
}
</style>
ページTOP

アニメーション

CSSの「animation」を使用することで、画像の縮小・拡大を動かすこともできます。

サンプル画像
<style type="text/css">
.sample2{
  display  : inline-block;
  animation: sample2Anime 4s alternate infinite; /* アニメーション指定 */
}
@keyframes sample2Anime{
   0% { transform: scale(1, 1);   }    /* 大きさ */
 100% { transform: scale(2, 0.5); }    /* 大きさ */
}
</style>
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン