Question

以下代码不起作用。如果在固定版式的情况下可以工作。

<div style="text-align:center;">
    <amp-img style="max-width: 640px;"  width="640" height="480" layout="responsive" src="~/Content/images/foo.JPG" />
</div>

请注意style =“ max-width：640px;”当窗口足够宽时，用于防止该图像填满宽度。

任何提示将不胜感激。

Answer 1

您将图像包裹在HttpPostedFileBase beforePhoto = Request.Files["beforePhoto"]; HttpPostedFileBase afterPhoto = Request.Files["afterPhoto"];中，这是一个很好的开始。不知道具体如何设置页面，但对$('body').on('click', '#submitPhotos', function () { console.log("submittingform"); var $form = $('#SendClientEmail'); //Create form data type var data = new FormData(); //append photos var files1 = $("#beforePhoto").get(0).files; var files2 = $("#afterPhoto").get(0).files; data.append("beforePhoto", files1[0]); data.append("afterPhoto", files2[0]); //append address var address = $('#clientAddressSelect').val().toString(); data.append("address", address); console.log(data); $.ajax({ type: "POST", url: '/home/SendClientEmail', data: data, //dataType: 'json', contentType: false, processData: false, error: function (xhr, status, error) { //do something about the error }, success: function (response) { //do something with response //$('#processingModal').modal('hide'); } }); });设置自动0的边距对我来说是有效的。

Here's a pretty good explanation of div，以及为什么它可能无法对中。

div

margin: 0 auto;

如果要玩耍，可以here进行测试。

Answer 2

使用@Craig Scott的方法和想法。仅当我编写AMP图像代码以使图像居中时，我才成功。

<div class="img-wrapper">
<amp-img src="https://jomutech.com/dispJomutechIcon.png height="50" width="250" layout="responsive" alt="Logo">
</amp-img>
</div>

<style amp-custom>
  div.img-wrapper {
    text-align: center;
  }
</style>

如何使用响应式布局使amp-img居中

2 个答案: