画像の枠（border）を設定すると、画像がぼやける

PR 2018/3/31

このトピックには3件の返信、2人の参加者があり、最後にわいひらにより7年前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2018年3月31日 5:51 PM #59498
  
  hoyaza
  ゲスト
  
  http://hoyaza.com/yahoo-shopping/cannot-cancel
  
  主に画面キャプチャした画像が多いのですが、一部の画像に灰色の枠線を付けたいため、cssにクラス名「.border」として「border:1px solid #aaa;」を設定して記事無いのclassに設定したら、枠線は思い通り表示されるのですが、設定した画像だけぼやけます。画像のサイズが少し小さくなっているのでしょうか？
  
  後で、「カスタマイズ」の「画像」項目から画像効果を設定できることを知り、「ボーダー（枠線）」を設定してみましたが、結果は同様で、画像ぜんぶが微妙にぼやけます(笑)
  
  オリジナルサイズのまま枠線（border）を付けるテクニックを教えて頂けないでしょうか？
- 2018年3月31日 7:09 PM #59503
  わいひら
  キーマスター
  ボーダーの幅のぶんだけ画像が小さくなっているようですね。
  このように書くと良いかもしれません。
```
.border {
    border: 1px solid #aaaaaa;
    box-sizing: content-box;
}
```
- 2018年3月31日 10:53 PM #59505
  
  hoyaza
  ゲスト
  
  わいひら、さんご教授いただきありがとうございました。無事なおりました。画像がくっきり表示できるようになって嬉しいです^^　また「box-sizing」というプロパティの勉強にもなりました。
- 2018年3月31日 11:27 PM #59507
  
  わいひら
  キーマスター
  
  うまくいったようでよかったです^^
投稿者

投稿

3件の返信スレッドを表示中

トピック「画像の枠（border）を設定すると、画像がぼやける」には新しい返信をつけることはできません。