ã€CSS】imgç”»åƒã®ç¸¦æ¨ªæ¯”ã‚’ä¿ã£ãŸã¾ã¾ãƒœãƒƒã‚¯ã‚¹å†…ã«åŽã‚る方法 | Freelance Journal フリーランス ジャーナルè¦ä»¶æ¦‚è¦: ボックスã®ã‚µã‚¤ã‚ºã¯å›ºå®š 横長ã®ç”»åƒãŒæ¥ãŸã‚‰ãƒœãƒƒã‚¯ã‚¹ã®æ¨ªå¹…ã«åˆã‚ã›ã‚‹ 縦長ã®ç”»åƒãŒæ¥ãŸã‚‰ãƒœãƒƒã‚¯ã‚¹ã®ç¸¦å¹…ã«åˆã‚ã›ã‚‹ ç”»åƒã‚µã‚¤ã‚ºãŒãƒœãƒƒã‚¯ã‚¹ã‚µã‚¤ã‚ºã‚ˆã‚Šå°ã•ã„å ´åˆã¯ãã®ã¾ã¾ 縦横ä¸å¤®æƒãˆ çµè«–ã‹ã‚‰ã„ã†ã¨ã€ã€Œç¸¦æ¨ªä¸å¤®æƒãˆã€ä»¥å¤–ã®è¦ä»¶ã¯ä¸‹è¨˜ã®CSSã§å®Ÿç¾ã§ãã¾ã™ã€‚ img { width:auto; height:auto; max-width:100%; max-height:100%; } ボックス内ã§ç”»åƒã‚’縦横ã«ä¸å¤®æƒãˆã•ã›ãŸã„å ´åˆã‚‚多ã„ã¨æ€ã„ã¾ã™ã€‚デモを用æ„ã—ã¾ã—ãŸã®ã§ã€ã”å‚考下ã•ã„。 See the Pen 4 way to keep image ratio inside a box by wang (@yaquawa) on CodePen. 全部ã§5通りã®æ–¹æ³•ã§ã™ã€‚ボックスã®ç«¯ã‚’ドラッグã—ã¦ãƒªã‚µã‚¤ã‚ºã—ã¦ã¿ã¦ãã ã•ã„。ボックスã®ã‚µã‚¤ã‚ºã«å¿œã˜ã¦åŽã¾ã‚Šæ–¹ã‚‚変ã‚ã£ã¦ãã‚‹ã“ã¨ãŒç¢ºèªã§ãã‚‹
{{#tags}}- {{label}}
{{/tags}}