jQueryで表示する画像のサイズをCSSで制御したい

Question

やりたいこと
ファイルを選択する。
で選択したファイルを表示する際のプレビュー時の画像サイズの調整を行いたい。

現状
選択したファイルをjQueryで表示するところまではできています。

参考似ているサイト
選択したファイルの画像をjqで表示する

参考にしたがそもそも画像表示がうまくいかなかったサイト
リンク内容

現在のソースコード
html

<section>
    <?php echo Form::open(array('enctype' => 'multipart/form-data')) ?>
    <div class="form">
        <table>
            <tr>
                <th>画像</th>
                <td class="imgInput">
                    <div><?php echo Form::file('file1[0]'); ?></div>
                </td>
            </tr>
            <tr>
                <th colspan="2" class="btn_th"><input type="submit" name="submit" value="確認" class="submit_button" onclick="return check_hope_date()"></th>
            </tr>
        </table>
    </div>
    <?php echo Form::hidden("mode", "confirm") ?>
    <?php echo Form::close() ?>
</section>

js

<script type="text/javascript">
    $(function(){
        var setFileInput = $('.imgInput');

        setFileInput.each(function(){
            var selfFile = $(this),
                selfInput = $(this).find('input[type=file]');

            selfInput.change(function(){
                var file = $(this).prop('files')[0],
                    fileRdr = new FileReader(),
                    selfImg = selfFile.find('.imgView');

                if(!this.files.length){
                    if(0 < selfImg.size()){
                        selfImg.remove();
                        return;
                    }
                } else {
                    if(file.type.match('image.*')){
                        if(!(0 < selfImg.size())){
                            selfFile.append('<img alt="" class="imgView">');
                        }
                        var prevElm = selfFile.find('.imgView');
                        fileRdr.onload = function() {
                            prevElm.attr('src', fileRdr.result);
                        }
                        fileRdr.readAsDataURL(file);
                    } else {
                        if(0 < selfImg.size()){
                            selfImg.remove();
                            return;
                        }
                    }
                }
            });
        });
    });
</script>

css

/* FORM
=======================================*/

div.form{

}

div.form table{
	width: 100%;
}

div.form table th{
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #3e60a7;
	border-top: 1px solid #fff;
	padding: 15px 0 15px 15px;
	width: 230px;
}

div.form table th span{
	font-size: 12px;
	font-weight: normal;
	padding-left: 10px;
}


div.form table td{
	text-align: left;
	font-size: 12px;
	font-weight:nomal;
	border-top: 1px solid #3e60a7;
	border-right: 1px solid #3e60a7;
    border-bottom: 1px solid #3e60a7;
	padding: 15px 0 15px 15px;
}


div.form table th.btn_th{
	background: none;
	text-align: center;
	border-top: 1px solid #3e60a7;
}

span.form_require{
    color: red;
}

td.form{
	margin:0 5px 5px 0;
	max-width:160px;
	vertical-align:bottom;
}


@media screen and (max-width: 640px) { /* SmartPhone Display - width:640px under - */
/*========================================


/* FORM
=======================================*/

div.form table{
	width: 100%;
}

div.form table th{
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #3e60a7;
	border-top: 1px solid #fff;
	padding: 5px 0 5px 5px;
	width: 50% ;
}

div.form table th span{
	font-size: 12px;
	font-weight: normal;
	padding-left: 10px;
}


div.form table td{
	text-align: left;
	font-size: 12px;
	font-weight:nomal;
	border-top: 1px solid #3e60a7;
	border-right: 1px solid #3e60a7;
    border-bottom: 1px solid #3e60a7;
	padding: 5px 10px 5px 10px;
}


div.form table td input.file{
	width: 130px;
}


div.form table th.btn_th{
	background: none;
	text-align: center;
	border-top: 1px solid #3e60a7;
}




}

どうすれば表示した画像にサイズ指定できますでしょうか？

Comments

[yoorwm]

JQとは何だろうな？と思ったら、jQueryの事でしたか。ところで、hamaguriさんは勝手に人の名前を変えられたりしても笑って見ていられる人でしょうか？

[amaguri]

タイトル修正しました

[kei344]

「アップロードする前に画像を切り出したい」ということでしょうか。それともプレビュー時の画像のサイズを制限（縮小）したいということでしょうか。

[amaguri]

プレビュー時の画像のサイズを制限（縮小）したいということです！

Answer 1

こういうことでしょうか。

.imgView {
    max-width: 50px;
}

Comments

[amaguri]

ありがとうございます解決できました！