CSSで画像をトリミングしてレスポンシブ対応したい

Question

以下のようなコードで表示される画像を、PC閲覧時にフルサイズ表示。モバイル閲覧時に左右を200pxずつトリミングしてからフルサイズ表示したいです。

<div class="hako">
<img src="aaa.jpg">
</div>

（aaa.jpgのサイズは幅1200px、高さ250px）

以下を見つけて、高さ・幅を差し替えて行なってみたのですが、うまくいきませんでした。
https://teratail.com/questions/9293

また、色々ぐぐってみて、clipプロパティを使ったものが良さそうだったのですが、これもうまくいきませんでした。

何か良い方法はないものでしょうか？

ご教授いただければ幸いです。
よろしくお願いいたします。

Answer 1

これで行けるはずです。
もし質問の意図と違っていたらすみません。

.hako {
	overflow: hidden;
	position: relative;
	width: 1200px;
}
@media (max-width:767px){
	.hako {
		height: 0px;
		padding-top: calc( ( 100% + 400px ) * 0.2083 );
		width: 100%;
	}
	.hako img {
		height: auto;
		left: -200px;
		position: absolute;
		top: 0;
		width: calc( 100% + 400px );
	}
}

Comments

[coinbura]

意味を理解するのに、かなり時間がかかりましたが、無事できました！
ありがとうございます！！

Answer 2

object-fit でどうでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

Comments

[coinbura]

ありがとうございます。
早速試してみたところ、

width:100%;
height:250px;
object-fit: cover;

とした場合、モバイルで見た場合、エグい程縦長な画像になってしまいました・・・。

Answer 3

clipだと消した両サイドの200pxが余白となってしまうからNGということですよね。

手元で試してはいませんが、
.hako{
width:800px;
overflow:hidden;
}
.hako img{
text-align:center;
}
とするのはいかがでしょうか。

もしこれでもダメなら、.hakoのbackground-imageで読み込ませる方が簡単なような気がしますが・・・

Comments

[coinbura]

ありがとうございます。

ただ、残念ながらうまくいきませんでした。