calcをしようするとimgが崩れてしまう

Question

前提・実現したいこと

現在、模写コーディングをしています。初学者です。
カードを3枚均等に並べたのですが、cssでcalc関数を使用するとイメージ画像が崩れてしまいます。(使用前は崩れない)
画像を崩さないでレスポンシブに対応した均等なカード(レイアウト)にしたいのでご教授いただきたいです。

該当のソースコード

以前にもしようしたコードなので間違いはないと思うのですが、一応載せておきます。
margin: 0 30px 20px 0;
width: calc(33.33333333% - 60px / 3);

※練習用のデザインカンプに沿ってコーディングしているのでmargin-right,margin-bottomの値は固定で何とかしたいです。

<div id="blog-tile-container">
            <div class="title">
                <h1>Blog Tile</h1>
            </div>
            <div class="tile-inner">
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner">
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner"> 
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner">
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner">
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner">
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
                <div class="tile-content">
                    <div class="tile-content-img">
                        <img class="img" src="img/card-bt-img.svg" alt="">
                        <span class="label">ラベル</span>
                    </div>
                    <div class="tile-content-inner">
                        <h3>タイトルタイトル</h3>
                        <p>テキストテキストテキストテキストテキスト
                            テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
            </div>
        </div>

#blog-tile-container {

    @include title;

    .tile-inner {
        display: flex;
        flex-wrap: wrap;
    }

    .tile-content {
        width: 340px;
        height: 355px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0px 3px 6px #000029;
        margin: 0 30px 20px 0;
        width: calc(33.33333333% - 60px / 3);
    }

    .item:nth-child(3n) {
    margin-right: 0;
}

    .tile-content-img {
        position: relative;

        .img {
            padding: 16px 16px 0;
        }

        .label {
            background-color: #3F51B5;
            color: #fff;
            padding: 5px 30px;
            font-weight: bold;
            font-size: 12px;
            position: absolute;
            top: 16px;
            right: 14px;
        }
    }

    .tile-content-inner {
        padding: 0 16px 28px;
        color: #6F7579;

        h3 {
            font-size: 20px;
        }

        p {
            font-size: 16px;
        }
    }
}

試したこと

imgをbackground-imageにしてみたり、imgを包含しているdivの位置を変えてみたりしているのですがなかなかうまく行きません。
お気づきの点があれば、ぜひご教授願います。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

回答とは直結しませんが気になった点を
せっかくcalcをお使いなのですから%も綺麗に求めませんか？

width: calc( ( 100% / 3 ) - ( 60px / 3 ) );
/* <=> */
width: calc( ( 100% / 3 ) - 20px );
/* <=> */
width: calc( ( 100% - 60px ) / 3 );

（同値記号か？まぁいっか

Comments

[KengKeng]

ご指摘助かります。
1人で書いたコードですと、気づけないところもあるので、客観的なご意見もありがたいです。
今後も見やすいコードを意識していきたいと思います。

[kyoya0819]

参考になれば何よりです。

Answer 2

画像サイズが大きいとはみ出してしまう気がします。
以下を指定すると解決しそうです。

.tile-content-img .img {
  padding: 16px 16px 0;
  max-width: 100%;
  box-sizing: border-box;
}

Comments

[KengKeng]

ご親切かつ迅速な対応ありがとうございます。
無事問題解決しました！
max-widthとbox-sizingは見たことはありましたが、なかなか意識して使用したことがなかったので目から鱗でした。

[new1ro]

ありがとうございます！

補足として、50pxなど小さい画像の場合を考えると、
「max-width: 100%;」ではなく、「width: 100%;」でもいいかもしれません。

小さい画像を表示する可能性があればご一考ください。